Create a flash game like Security – part 2

Emanuele Feronato Flash

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

Want to learn more? Learn by example!

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

Comments 72

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

  2. Wildwobby

    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. Pingback: Flash animation with motion guide tutorial at Emanuele Feronato

  4. Post
    Author
  5. EBLUP

    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?

  6. barney

    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

  7. Robert

    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

  8. Renz

    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?

  9. Robert

    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

  10. Aaron McKelvie

    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)

  11. Robert

    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

  12. Post
    Author
  13. Post
    Author
  14. Aaron McKelvie

    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.

  15. wolf-orth

    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)

  16. Aaron McKelvie

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

  17. Simon Mann

    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.

  18. kirbybotboy

    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.

  19. cody

    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

  20. cody

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

  21. shalli

    hi Emanuel, great tutorial!!!

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

    great little game though

  22. wazzup

    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

  23. Youngbluud

    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!

  24. shedokan

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

  25. Sibux

    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?

  26. Pingback: Create a flash game like Security - part 3 at Emanuele Feronato

  27. Conn

    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… :(

  28. Xodus

    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.

  29. Xodus

    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?

  30. chaos548

    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 :)

  31. TimeSniper

    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?

  32. Djz

    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

  33. Daniel

    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?

  34. Erostian

    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}])

  35. MJC

    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.

  36. Scuddle

    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.

  37. Richard Muthwill

    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

  38. Davi

    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)

  39. ashwin

    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

  40. Reay

    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

  41. Tyler King

    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? :(

Leave a Reply

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