Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Create a flash game like Security – part 2

July 27th update: part 3 released

This is the second part of the creation of a flash game like Security. In the first part we saw how to create the maze, the player and the “cop”.

Now, we’ll see how to create a “smart” cop.

I did not like how the orginal game managed the “line of sight”, so I decided to try coding something different and closer to the reality (well, if a blue circle is supposed to be a “cop” we are not so close to reality, anyway…).

The line of sight

Let’s imagine what is a “line of sight”: basically, it’s a line that connets the “cop” to the objects the cop can see. In our case, the only thing we need our cop to see, is the player. So, in next example, the line of sight is a line that goes from the cop to the player.

I created an object representing a green line and I dragged to the scene, instancing it as “line”.

Then, in the COP actions I wrote this actionscript

Lines 2-10: Determine the angle between the cop and the player using trigonomerty basics as explained in Create a flash draw game like Line Rider or others – part 3 tutorial.

Lines 11-12: Place the line _x and _y in the same position of cop’s _x and _y

Line 13: Rotates the line of angle degrees

Try to move the player, and you will see the cop line of sight following him.

Hey! our cop is not Superman! He can’t see through walls!

The line of sight (limited by walls)

We have to have the cop see the player only when the line of sight hits the player before hitting any wall.

The new cop actionscript is:

Line 12: Declare a variable called wall_collision to zero

Line 13: Loop to be executed as much times as the distance between the cop and the player, in pixels. This can be CPU expensive if you have large stages or lots of cops. In this case, you can adjust the “x++” condition with, in example, “x+=3″. This will make the process faster but less accurate. It’s up to you to find the right gameplay balance.

Lines 14-15: Determining the x and y coordinates of the x-th pixel from the cop in direction of the player, using trigonomerty

Line 16: Test the collision between the pixel just determined and the wall

Lines 17-18: If the test is positive, then the cop, looking in the direction of the player, won’t see the player because there is a wall in the middle. So I set the wall_collision variable to 100 and break the loop to save CPU

Line 24: Set the alpha of the line at 100-wall_collision… in other words to opaque if the cop sees the player, and transparent if the cop does not see the player. This is only for testing the line of sight, of course… in a real game you can make the cop fire (we’ll se how in another tutorial) or call a game over screen.

Try to move around the screen and you will see the cop will spot you only if there are no walls between the player and the cop.

You may say: why don’t just perform an hit test between the line of sight and the walls, having the line of sight going exactly from the cop to the player? This is an idea, but will prevent to code special stuff such as mirrors, special walls that deflects the line of sight in a strange way, and so on.

Once the cop sees correctly, it’s time to make him patrol the area

The line of sight (limited by walls) of a moving cop

To have the cop patrolling the area, I removed the cop movieclip from the stage and inserted another one, called cop_patrol.

This movieclip consists in the cop himself moving around using a guide layer.

So in the main scene we do not have the cop movieclip but the cop_patrol one. In the cop movieclip (inside the cop_patrol) the actionscript is:

As you may notice, the actionscript is the same as before, but all pixel measurements are taken adding to the _x and _y values (the cop position) the _root.cop_patrol_x and _root.cop_patrol_y values (the position of the cop_patrol movieclip).

I had to do this because the _x and _y values are relative to the parent movieclip, in this case the cop_patrol movieclip… so I have to add to these values the position of the cop_patrol movieclip to have the real coordinates.

Now we have a patrolling cop that will see the player only if there are no walls between the player and the cop.

That’s almost perfect, but I didn’t know cops had eyes on their back… so we need the cop to see only in the direction they are walking.

The line of sight (limited by walls) of a moving cop seeing only in front of him

We need to determine the direction the cop is walking in. I did changing the cop’s actionscript in this way:

Lines 21-22: Determine the distance from the current cop position and the previous cop position. In the first frame, these values will be undefined.

Lines 23-29: Determine cop direction using trigonometry

Lines 30-31: Save the current cop position (that will be used as the old cop position next time lines 21-22 will be called)

Line 32: Determine the angle of sight, according to the cop direction and the absolute angle between the cop and the player

Lines 33-40: Determine if the angle of sight is in the cone of 60 degrees in the cop direction. In that case, show the line (if there are not walls between the cop and the player). If the angle of sight is not in the cone, don’t show the line.

Now you will notice the cop will “see” you only if you are standing in front of him.

This is how a line of sight should be.

Download the source codes and give me feedback, then learn how to place exits and have a second agent in next step

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (21 votes, average: 4.62 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 72 comments

  1. Create a flash game like Security - part 1 at Emanuele Feronato

    on April 29, 2007 at 3:25 pm

    [...] April 29th update: part 2 released [...]

  2. Wildwobby

    on April 29, 2007 at 3:57 pm

    You are an amazing tutorial writer. The only thing is I don’t quite understand the trig. I know how to do trig but I really don’t understand how to take advantage of it in flash. Are there any tutorials on that? Thanks for all the resources on your site. They are a HUGE help.

  3. NIc

    on April 29, 2007 at 6:24 pm

    Wow. Great tutorials.

  4. Peh

    on April 29, 2007 at 11:01 pm

    Nizze :D
    Good tutorial, keep up.

  5. Flash animation with motion guide tutorial at Emanuele Feronato

    on May 2, 2007 at 5:36 pm

    [...] « Create a flash game like Security – part 2 [...]

  6. abhilash

    on May 3, 2007 at 11:27 am

    good tut
    can’t we make cop with AI??

  7. Emanuele Feronato

    on May 3, 2007 at 11:36 am

    Sure! In next tut. Stay tuned!

  8. mango

    on May 9, 2007 at 10:17 pm

    wonderfull !
    can’t wait for next parts !!

  9. EBLUP

    on May 16, 2007 at 1:43 am

    hey long time no talk.

    i think thesis people want more than just that and they don’t want to wait so if you want ill send you flash games and you can make tutoreals for them. OK?

  10. EBLUP

    on May 16, 2007 at 1:44 am

    abhilash ill make some a i if you want? ok or no? reply for me to talk

  11. RJ

    on May 17, 2007 at 1:35 am

    Helped me alot, thanks.

  12. Robert

    on May 17, 2007 at 6:50 am

    pls help i dont know how to make it patrol pls help
    email at doomed_blondie1@hotmail.com
    and ur files wont open

  13. robert

    on May 18, 2007 at 6:09 am

    thx though i figured it out

  14. barney

    on May 20, 2007 at 4:40 pm

    Plz help, my line of sight does not connect to the hero!!!!

    What have I dun wrong???

    The line moves and everything apart from it points no way near my hero!?!?!?!?!

    barney

  15. Robert

    on May 21, 2007 at 3:15 am

    Barney
    make sure that your line image is allinged to the right of the center point in the screen where you can edit it

    here is how to fix it

    1. open the line image for editing
    2. move the entire lint so that it starts at the center point and have it facing east
    3. if you need more help feel free to ask

  16. Renz

    on May 21, 2007 at 6:46 am

    hey, nice tutorial, but there’s a tiny problem here, how can you make your player go to a another level when he enter a room and i tried to go near the cop but did not restart pls e-mail me about how to go to another room?

  17. Aaron McKelvie (Big fan) :P

    on May 23, 2007 at 4:48 am

    Hey! I have something i know you wuold know this but it saves needing these lines:

    if (dist_x=0 && dist_y

  18. Aaron McKelvie (Big fan) :P

    on May 23, 2007 at 4:53 am

    Why couldn’t my whole post be seen, ive got a file showing both tangent math functions working if you wanna see it? If anyone needs Flash help I’m newish but i understand it well for 15 just add me. Aaron_JFX@hotmail.com

  19. Robert

    on May 23, 2007 at 6:58 am

    the way to change lvls is to creat an exit spot
    such as a immage
    then you add this code to your hero under neath the wall test code
    if (_root.exit.hitTest(_x, _y, true)) {
    _root.gotoAndPlay(“win”)
    }
    }
    there and make sure you have your x and y set for the restart

  20. Robert

    on May 23, 2007 at 7:09 am

    change “win” to whatever you have the next levels frame called.

  21. Aaron McKelvie

    on May 23, 2007 at 12:56 pm

    Emanuel is there any other way i can contact you? I have a question too big to fit down here. Or anyone who can help me thanks =] (regarding a trig question, how to get Hypotenuse)

  22. Robert

    on May 23, 2007 at 2:12 pm

    i have a finished security game
    i created it and ya its not perfect but im new to flash and im 16
    where can i host my game

  23. Emanuele Feronato

    on May 23, 2007 at 2:30 pm

    Send it to info[at]emanueleferonato.com

  24. Aaron McKelvie

    on May 23, 2007 at 3:40 pm

    So I can contact you there?

  25. Emanuele Feronato

    on May 23, 2007 at 4:12 pm

    Yes sir

  26. Aaron McKelvie

    on May 23, 2007 at 4:50 pm

    I sent you an email. Also, have you ever though of making a tutorial on Dynamic Movieclip production? Its something myself and alot of others struggle with.

  27. n00b5150

    on May 23, 2007 at 11:52 pm

    Hey, i got the guy to move around and all, but when he sees me, how do i make it make me lose, or restart???

  28. Mr.Cody

    on May 24, 2007 at 5:56 pm

    thx for the help. think u can explain how to go to the next level next?

  29. wolf-orth

    on May 24, 2007 at 11:06 pm

    hey grate tutorial
    your grate
    but will this work on flash MX?
    im really new to flash because im only 14 i have a bit of experience with flash games and i bit with unreal gegin 2 (search google for unreal engin 3 and u can find a link of the first option for a free download of unreal 2. its annoying to install though)

  30. wolf-orth

    on May 24, 2007 at 11:07 pm

    lol i cant spell very well coz im thick i ment engin not gegin

  31. Aaron McKelvie

    on May 25, 2007 at 6:43 am

    If you download the files they wont work, however you should have no problems running that code. =]

  32. Simon Mann

    on May 26, 2007 at 3:22 pm

    Very good tutorial, gave me some real help with a game i’m developing. I have just one question, what about if I wanted my ‘cop’ to move to various different points at certain times. So, for example, he would move to point one, avoiding obstacles, then once he has reached that point he moves to point two, and so on. Is this possible withing flash?

    cheers.

  33. kirbybotboy

    on May 27, 2007 at 12:18 am

    Hi I had a few questions but first i’d like to say that your tutorial is amazing, you explain each line of code and that really helps me understand it.

    I’m having trouble with the cop being able to see out of the front of its eyes only. I can make it so that the cop patrols and see’s all around, but for some reason when i put in the code for having the cop see just in front of him, it does not work. If you could please post here to help me that would be great. Or you can email me at kirbybotboy@aim.com that would be really helpful!

    Thanks again for the excellent tutorial.

  34. One of the KLA

    on May 29, 2007 at 3:27 am

    I have a question. What is it you’re supposed to do if your character is not a circle and you want it to walk behind something (like a tree), because I am using this as a basis for what I am creating. E-mail me at k-istheonly1@yahoo.com

  35. robert

    on May 30, 2007 at 9:02 am

    i want part 3 pls cuz i have 18 lvls on mine

  36. robert

    on May 31, 2007 at 9:23 am

    here is a link to my game
    http://www.newgrounds.com/portal/view/381290
    vote and leave comments

  37. robert

    on June 3, 2007 at 3:28 am

    the link changed
    http://www.newgrounds.com/portal/view/381462

  38. cody

    on June 3, 2007 at 5:41 am

    ROBERT!!!! i played ur game and my fingers started to hurt after i was holding the shift button down to long in order to move faster. u should probably make your chracter “walk” faster….
    (PS) will some explain to me how to go to another main frame (not inside the chracter) if one object hits another

  39. Ry

    on June 4, 2007 at 12:07 am

    this tutorial was very stupid u only use onClipEvents!!!!!

  40. robert

    on June 4, 2007 at 2:33 pm

    CODY YOU COULD HAVE LET GO OF SHIFT IT WAS TOGGLE-able

  41. cody

    on June 4, 2007 at 6:20 pm

    (robert)………ooooohhhhhhhhhhhhhhhhhhhh

  42. cody

    on June 5, 2007 at 12:53 am

    hey next tutorial do u think u can teach us about having the cop move toward the person once the “line of sight appears”?

  43. shalli

    on June 8, 2007 at 12:16 pm

    hi Emanuel, great tutorial!!!

    Robert played your game. How have you got the cop to follow the hero like that?

    great little game though

  44. wazzup

    on June 11, 2007 at 7:09 pm

    Can someone help me with the code. Im trying to link a finish area to the next level but it keeps comming up with errors. Here is what i have so far.

    onClipEvent (load) {
    power = 3;
    radius = 6;
    _x = 35;
    _y = 40;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    _x -= power;
    }
    if (Key.isDown(Key.RIGHT)) {
    _x = power;
    }
    if (Key.isDown(Key.UP)) {
    _y -= power;
    }
    if (Key.isDown(Key.DOWN)) {
    _y = power;
    }
    while (_root.wall.hitTest(_x, _y radius, true)) {
    _y–;
    }
    while (_root.wall.hitTest(_x, _y-radius, true)) {
    _y ;
    }
    while (_root.wall.hitTest(_x-radius, _y, true)) {
    _x ;
    }
    while (_root.wall.hitTest(_x radius, _y, true)) {
    _x–;
    }
    if (_root.finish.hitTest(_x, _y, true)) {
    _root.gotoAndPlay(“653″)
    }
    }
    if ((_root.cop.hitTest(_x, _y radius, true)) or (_root.cop.hitTest(_x, _y-radius, true)) or (_root.cop.hitTest(_x radius, _y, true)) or (_root.cop.hitTest(_x-radius, _y, true))) {
    _x = 35;
    _y = 40;
    }
    }

    Email me with reply please

  45. wazzup

    on June 11, 2007 at 7:10 pm

    ohh this is my email if you can help me wazzup333@hotmail.co.uk

  46. Youngbluud

    on June 22, 2007 at 11:19 pm

    nice tutorial. its the first one of the only tutorials i could find with the correct action script codes. cant wait for the next one!

  47. Youngbluud

    on June 22, 2007 at 11:21 pm

    sorry, i meant to just say “one of the only tutorials”.

  48. shedokan

    on June 22, 2007 at 11:40 pm

    (robert), if you want I can host your game on my website, contact me fr more details at shedokan[@]yahoo.com remove the [ and ]

  49. Sibux

    on July 10, 2007 at 2:21 am

    I love this tutorial.
    Robert what did u do to have the cop follow the hero? or can anyone else tell me?

  50. Sibux

    on July 11, 2007 at 2:59 am

    i made the thing of the cops but know I cant make that when I get to 0 lives its game over can someone explain me please?

  51. Create a flash game like Security - part 3 at Emanuele Feronato

    on July 27, 2007 at 11:14 pm

    [...] First of all you should read parts 1 and 2, then follow me and learn to create some interesting things. [...]

  52. Conn

    on August 23, 2007 at 4:59 pm

    Can you do a walkthrough like this, only for game maker (preferably 7.0, lite version)? I have flash but my trial has ended today… :(

  53. celie

    on October 7, 2007 at 9:42 am

    how do you create an object representing a green line and instance it as “line”?

  54. Zuhair

    on October 26, 2007 at 8:10 pm

    It does not work for me

  55. Xodus

    on November 6, 2007 at 11:53 am

    It would make this game even better if you could combine it with the survival horror game flashlight thing, i’m going to see if i can work on that,not with a flashlight but just as a field of view for the player.
    Gr8 tut.

  56. Xodus

    on November 6, 2007 at 3:47 pm

    For some reason, the moving cop dosent seem 2 work, should i add the motion guide in sceen 1, or should i do it after double clicking the movieclip cop?

  57. chaos548

    on May 30, 2008 at 6:32 am

    Add this on your character
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.SHIFT)) {
    power = 6;
    if (Key.isDown(Key.LEFT)) {
    _root.energy–;
    _x -= power;
    }
    if (Key.isDown(Key.RIGHT)) {
    _root.energy–;
    _x += power;
    }
    if (Key.isDown(Key.UP)) {
    _root.energy–;
    _y -= power;
    }
    if (Key.isDown(Key.DOWN)) {
    _root.energy–;
    _y += power;
    }
    }
    }

    This code will make your character run while holding shift and decreases your energy bar
    Add this on your energy bar
    onClipEvent (enterFrame) {
    this._xscale = _root.energy;
    if (_root.energy<=0) {
    _root.energy = 0;
    }
    }

    My problem are :
    1.It continues running even without energy
    2.It go through walls

    I hope you can help me :)

  58. nick

    on June 4, 2008 at 2:45 pm

    The line won’t follow me what do I do please help me.

  59. TimeSniper

    on June 10, 2008 at 7:04 pm

    Will there be a follow up to these tutorials, The source codes don’t seem to have the coding for patroling cops, and and i can’t undertsand how to implement the different sections of code, into a game of my own. I’m keen to learn but am having difficulties.

    Emanuel you are great a doing tutorials, maybe its just me?

  60. Djz

    on June 18, 2008 at 11:41 am

    Hey i’ve got a problem in example 1. the thing is that the line works but it looks like the guys looking away and the more i move hte line moves. And nice tutorials keep em coming.

    Djz

  61. Daniel

    on September 4, 2008 at 11:40 am

    really nice tutorial, but I have 1 question;
    I am trying to up-grade the actionscript so that every time the cop hits the hero with the green line, the hero dies, but so far, it’s failing. I’ve got the following script:

    if ((_root.line.hitTest(_x, _y+radius, true)) or (_root.line.hitTest(_x, _y-radius, true)) or (_root.line.hitTest(_x+radius, _y, true)) or (_root.line.hitTest(_x-radius, _y, true))) {
    _x = 35;
    _y = 40;
    }

    Could you please tell me what’s wrong with the script?

  62. swistak

    on October 3, 2008 at 4:51 pm

    try replace “or” with “&&”

  63. Erostian

    on December 16, 2008 at 8:09 pm

    Yeah, I agree with Conn, please, make a tutorial for Security-esque games for the Game Maker 7.0 Lite Program. I have been using Game Maker and VBGore to make games, and will have my VBGore game coming out soon. But, back on subject, please, make a tutorial for GM7.0Lite.

    ([{Oh, and this doesn't list my real e-mail addy}])

  64. MJC

    on February 23, 2009 at 9:19 pm

    Good Post, have you ever thought about making money for your time and effort spent on writing good articles? At SayItAloud You can write, get exposure, and possibly earn some good money doing so. Either way, I’m bookmarking you. You can click on my name to go directly to our site.%d%a%d%aI look forward to your future postings.

  65. Scuddle

    on April 28, 2009 at 4:57 am

    Hey, I know this doesn’t go with the style of this tutorial but, I’m making a 2D style zombie game like zombie survival SM, and I’m having trouble making the zombie change frames so he’s always facing the player. I made it so he’s always fallowing him, But I can’t make him change frames once the player goes behind him, I tried to adapt the code used to make the line only fallow him if he’s in front of him. (above) but I couldn’t seem to make it work, So if someone could help me out, That’s be great.

  66. Richard Muthwill

    on July 1, 2009 at 7:21 pm

    Hey, i was just wondering if you we’re ever going to do another tutorial on this just envolving the cop. Ive been working on a new game recently and was wondering if another update was on its way. i was wondering if it was possible to have the line of sight, but it stops at the wall, and doesnt continue under the wall and then through it. an example: http://www.riiich.se/flash/lineofsightGlitch.JPG

    it would be good if the line stopped at the wall and the man (as if it were a laser on a gun)

    Amazing stuff btw – thanx, richard muthwill.
    PS. dont complain about my site, i’ve been busy and havent had it very long haha

  67. Echo

    on July 7, 2009 at 2:32 am

    Hey great tutorial, how do u get the cop to patrol e-mail me echo24six@yahoo.com

  68. Davi

    on November 15, 2009 at 3:58 am

    I already have some experience in Flash, but use the computer of my friend, and he likes the games that do, but has no way to get the free Flash (without trial)

  69. ashwin

    on March 6, 2010 at 9:13 am

    hey i am having trouble implementing the energy bar code posted by chaos548

    i get the same errors

    he is able to walk through walls..
    anybody help me on to implement collision using the energy bar

  70. Reay

    on August 6, 2010 at 4:30 pm

    Hey there, great tutorials!
    I was wondering if it was possible to make the line shorter, because I really don’t want to have the enemies seeing me from a mile away in the game I’m making.

    Thanks a lot in advance :D

  71. a person

    on February 18, 2011 at 5:10 am

    you should make it so you can assassinate him

  72. Tyler King

    on February 14, 2012 at 9:05 pm

    Hello! I am a high school student new to coding, and I can get the line of sight to work, and I tweened the cop so it is in motion, but the line of sight doesn’t follow the cop. Any suggestions? :(

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×