Making a Flash game like Plants Vs Zombies

As promised in fully explaining a PopCap game post, here we go with Plants Vs Zombies.

I have to say I am not a great PvZ player (shame on me), so if you notice something wrong during the series, let me know.

Defining the main structure of the game

PopCap did a great look and feel job with PvZ as defending your house from brain eater zombies has a great appeal… and all in all killing zombies is fun, as confirmed by blockbuster like Resident Evil, Left 4 Dead and Dead Rising. But this has nothing to do with the gameplay, which could be Butchers Vs Plumbers, Pigeons Vs Camels or Circles Vs Squares.

During the series, good circles will prevent evil squares to get to the base. Also, the structure of the game field can be simplified in a tile based game.

Take this situation:

And try to imagine it this way:

What we have is a plant on (2,2) ready to stop a zombie walking on row 2, another zombie approaching on row 3 and a sun falling through column 4. There can’t be another plant on (2,2), and a new zombie never appear between row 2 and 3.

Again, bow to PopCap for making you believe this was the hardest game to code.

Creation of the game field

As you can see in the above picture, the game field is a 5 rows x 9 columns matrix, so the first thing is defining an array with the same properties. I assume your fla file has a document class called Main. So this is the content of Main.as:

At the end of the script gameField array contains the 5×9 matrix.

Drawing the game field

This is more for a debug purpose, anyway we are going to draw the game field. I am using some rectangles drawn on the fly with drawRect method and filled with a random green.

What drawField function does could have been done directly in setupField function, but I wanted to keep things separate for a tutorial purpose. The only interesting line is the random green color generation between #007D00 and #00AE00 at line 25.

This is our game field. If you want to draw decent tiles, let me know

Catching suns

Suns are PvZ’s currency. They fall from the sky and land on a square. Picking them up, the player can buy plants.

We are using a timer event to drop a sun every five seconds. Refer to understanding AS3 Timer class if you aren’t familiar with it.

At the moment suns don’t fall down from the sky but just appear in a random tile. At the moment, I don’t know if two suns can land on the same tile. In this example they can, but if the original game does not allow it just let me know.

When a sun is on the ground, it can be picked up by the player. A mouse event listener handles the whole process. This is the script:

And a brief recap of the function used:

drawField: phyisically drawing the field

fallingSuns: setting up the suns to make them fall

newSun: creation of a new sun

setupField: preparing the field array

sunClicked: called when the player clicks on a sun

This is the result:

Pick up suns with the mouse.

Download the source code of the latest example. Next time, we’ll add smooth animation to falling suns and we will buy our first plant.

  • Wilson Silva

    Yes! Plants vs Zombies won! >:D
    Looking forward for the next parts

  • itisasecret

    Suns aren’t appearing randomly on the whole map, only on (0,0) (1,1) … (4,4).

    • itisasecret

      Line 27 should be: sun.y=130+sunCol*75;

      • tibbi

        wrong, y is row, x is col… so
        sun.x=57+sunCol*65;
        sun.y=130+sunRow*75;

        (made it 57 instead of 52 so its in the middle with such circle)

  • Dillon

    You are the man Emanuele!!!
    P v Z is the best!

    Can’t wait until the next tutorial :)

  • xiaoxiaocainiao

    my lord`

  • Cute ! I’m ready for next parts !

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

  • Thanks for the tuto Emanuel.

    I made a spanish version, if you can add to post the link, i will be glad :)

    http://www.indiegames.es/como-hacer-juego-flash-tipo-plants-vs-zombies-parte-1/

  • david

    I was looking forward to this. But what do you mean exactly with “a new zombie never appear between row 2 and 3.”?

    • rishabh

      david
      he means that , in plants versus zombies

      say this was your grid …….<
      …….<
      those are row 2 and 3 an zombie can only appear from the arrows , it will never appear between th rows

  • Pingback: Come ricreare Plants Vs. Zombies in Flash – Indie Vault()

  • Markis

    According to Paypal “You can build your application using any language or tool chain that supports web programming, such as PHP, Python, Java or C#.”

    Is Flash one of them? If Flash is so popular then why didn’t they list it? I was told many of the games on Facebook uses Flash.

    Thanks!
    Markis

  • Davide

    Vote -10 for not playing PvZ :D
    Vote 10 for the tutorial that promise well for the series, but only a note: if I remember well, suns doesn’t appear random on all the grid, but always fall from the sky, except the one produced by the sunflower.

  • rishabh

    @davide
    he said he will add that in the next lesson
    it wouldn’t be to hard
    saving the suns final position
    placing the suns y to -20 for example
    then tweening it to its final position (x should stay the same)

    • Davide

      Uops I did not noticed that the random appear was a temporary solution sorry :)
      Yep it’s not hard, the suns fall from sky to ground so we neither need to save “final” position, but only the “column” where the sun will came down :)

      I think that the game does not allow two falling suns on the same tile because after a period the sun disappear if the player doesn’t catch it, while it’s possible to have multiple suns from plants (the “dobule” sunflower producet 2 suns) and maybe one from sky and one/more from plants.

  • rishabh

    (Addon to last post)

    now that I know its tile based its not tough to make this XD

  • mahsa

    hi,please send code of Renju game in turbo c
    best reagards

  • hi,please send your code Renju game
    best reagard

  • Luke

    Sweet! This is exactly what I was looking for. Thanks for doing this series, I can’t wait for the next part!

  • Luke

    BTW, line 26 should be sunCol NOT line 27 as posted earlier. x is the column and y is the row. Keep up the good work!

  • Yunlong

    Line 26 should be: sun.x=52+sunCol*65;

  • Omegakenshin

    Still learning, but great example, I keep looking for more ^^
    Thanks for the share

  • rishabh

    lukes and yunlong are right

    X = column

    Y = row

    confusing at first but simple later on

  • Pingback: Enrique Duvos – RIA Excellence in Europe » Building PopCap games with Flash()

  • joanne

    Thank you soooooo much for this tutorial. I took a flash class for actionscript, but this goes way beyond that. :)

  • Pingback: Building PopCap games with Flash (Adobe Flash Platform Blog)()

  • Plasmacannon

    Can you finsh other tutoirals before making more

  • hello is there any flash as3 tutorial like angry bird ?

  • Bol

    Can anyone help me out. Where is sunMc defined?

  • Very nice tutorial. Going to read the others parts now!

    • Mark

      sunMc should be the name of the graphic of a sun you create.

      1) go to ‘Insert’ > ‘New Symbol’
      2) give new symbol a name of ‘sunMc’
      3) check box next to ‘Export for ActionScript’
      4) Ensure the class name is ‘sunMc’ (this will be by default if you name your symbol sunMc)
      5)Click OK. You’ll get a message box – just click OK.
      6)now draw your sun – try ’50px X 50px’ and align it so the registration point is in center.

      Save everything and run, you should not get the error, and after 5 secs – a new sun appears.

  • Max

    I’m also confused, where is sunMc defined?

  • Pingback: ActionScript: creando un ‘Plants vs Zombies’ (Parte I) | CREAGAMES - Desarrollo y Creacion de videojuegos, noticias, novedades, software, cursos gratuitos.()

  • Pingback: ActionScript: creando un ‘Plants vs Zombies’ (Parte II) | CREAGAMES - Desarrollo y Creacion de videojuegos, noticias, novedades, software, cursos gratuitos.()

  • dukas

    thanks emanuelle :)

  • Pingback: Week 11 | Learning Interactive Media()

  • patrik

    thanks for sharing

  • shamkerek

    Mr. Emanuelle, could you show us how to make scoring out of all your coding? thx, that will really help a ton

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

  • My girlfriend played Plants vs. Zombies untill I deleted the game from the PC as it drove me nuts….

  • Hari Krishna

    What program do you use? I would like a Unity tutorial.

  • Hari Krishna

    Also I am trying to make a Plants vs Zombies 2 with a different name different plants and everything. How do you improve the graphics? and how do you make th lawn have lawnmowers.

  • Patrick Lim

    Hi, I’m new to flash game programming and haven’t used flashed yet. I’m interested
    to make this game but I don’t know how to. can someone make a video tutorial for me a really step by step. please.. I would really appreciate any help. Tnx

  • Pingback: Flash Tutorials von Emanuele Feronato | senäh()

  • Jeff Mastromonico

    If you wanted to port this to the iphone, how would you resize the entire game?

  • carmine

    excuse the ignorance but
    what program are we using here ?
    thank you

  • luis

    tienes una version en AS2?
    lo que sucede es que tengo CS3 DE MACROMEDIA FLASH que no tienen una version posterior

    GRACIAS!!!

    have an AS2 version?
    what happens is that I have Macromedia Flash CS3 do not have a later version

    THANKS!

  • Pingback: The Ultimate Beginner Flash Game Programming Tutorial and Resource Guide | A Game Design Student()

  • Pingback: The Ultimate Beginner Flash Game Programming Tutorial and Resource Guide | BaltimoreGamer()

  • fisa

    if (you want to know about line 25)
    {
    trace(“You can learn about converting from hex to integers from this blog”)
    http://blog.kirupa.com/?p=69
    }

  • hhhhhmmmmm 2020

  • Pingback: Aymeric Lamboley » Live4Sales, a Plant vs Zombies clone()

  • Jordan Santiago

    This is pretty cool; thanks Emanuele!

  • cholo

    Any updates with this post? :)

  • Abdurrahman

    How to draw a good tile?