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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
onClipEvent (enterFrame) { dist_x = _root.hero._x-_x; dist_y = _root.hero._y-_y; angle = Math.atan(dist_y/dist_x)/(Math.PI/180); if (dist_x<0) { angle += 180; } if (dist_x>=0 && dist_y<0) { angle += 360; } _root.line._x = _x; _root.line._y = _y; _root.line._rotation = angle; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
onClipEvent (enterFrame) { dist_x = _root.hero._x-_x; dist_y = _root.hero._y-_y; dist = Math.sqrt(dist_x*dist_x+dist_y*dist_y); angle = Math.atan(dist_y/dist_x)/(Math.PI/180); if (dist_x<0) { angle += 180; } if (dist_x>=0 && dist_y<0) { angle += 360; } wall_collision = 0; for (x=1; x<=dist; x++) { point_x = _x+x*Math.cos(angle*Math.PI/180); point_y = _y+x*Math.sin(angle*Math.PI/180); if (_root.wall.hitTest(point_x, point_y, true)) { wall_collision = 100; break; } } _root.line._x = _x; _root.line._y = _y; _root.line._rotation = angle; _root.line._alpha = 100-wall_collision; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
onClipEvent (enterFrame) { dist_x = _root.hero._x-(_x+_root.cop_patrol._x); dist_y = _root.hero._y-(_y+_root.cop_patrol._y); dist = Math.sqrt(dist_x*dist_x+dist_y*dist_y); angle = Math.atan(dist_y/dist_x)/(Math.PI/180); if (dist_x<0) { angle += 180; } if (dist_x>=0 && dist_y<0) { angle += 360; } wall_collision = 0; for (x=1; x<=dist; x++) { point_x = (_x+_root.cop_patrol._x)+x*Math.cos(angle*Math.PI/180); point_y = (_y+_root.cop_patrol._y)+x*Math.sin(angle*Math.PI/180); if (_root.wall.hitTest(point_x, point_y, true)) { wall_collision = 100; break; } } _root.line._x = (_x+_root.cop_patrol._x); _root.line._y = (_y+_root.cop_patrol._y); _root.line._rotation = angle; _root.line._alpha = 100-wall_collision; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
onClipEvent (enterFrame) { dist_x = _root.hero._x-(_x+_root.cop_patrol._x); dist_y = _root.hero._y-(_y+_root.cop_patrol._y); dist = Math.sqrt(dist_x*dist_x+dist_y*dist_y); angle = Math.atan(dist_y/dist_x)/(Math.PI/180); if (dist_x<0) { angle += 180; } if (dist_x>=0 && dist_y<0) { angle += 360; } wall_collision = 0; for (x=1; x<=dist; x++) { point_x = (_x+_root.cop_patrol._x)+x*Math.cos(angle*Math.PI/180); point_y = (_y+_root.cop_patrol._y)+x*Math.sin(angle*Math.PI/180); if (_root.wall.hitTest(point_x, point_y, true)) { wall_collision = 100; break; } } dist_old_x = _x-old_x; dist_old_y = _y-old_y; cop_direction = Math.atan(dist_old_y/dist_old_x)/(Math.PI/180); if (dist_old_x<0) { cop_direction += 180; } if (dist_old_x>=0 && dist_old_y<0) { cop_direction += 360; } old_x = _x; old_y = _y; sight = angle-cop_direction; if (((sight<30)and(sight > -30))or(sight>330)) { _root.line._x = (_x+_root.cop_patrol._x); _root.line._y = (_y+_root.cop_patrol._y); _root.line._rotation = angle; _root.line._alpha = 100-wall_collision; } else { _root.line._alpha = 0; } } |
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
They can be easily customized to meet the unique requirements of your project.





(19 votes, average: 4.58 out of 5)







This post has 72 comments
Create a flash game like Security - part 1 at Emanuele Feronato
[...] April 29th update: part 2 released [...]
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.
NIc
Wow. Great tutorials.
Peh
Nizze :D
Good tutorial, keep up.
Flash animation with motion guide tutorial at Emanuele Feronato
[...] « Create a flash game like Security – part 2 [...]
abhilash
good tut
can’t we make cop with AI??
Emanuele Feronato
Sure! In next tut. Stay tuned!
mango
wonderfull !
can’t wait for next parts !!
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?
EBLUP
abhilash ill make some a i if you want? ok or no? reply for me to talk
RJ
Helped me alot, thanks.
Robert
pls help i dont know how to make it patrol pls help
email at doomed_blondie1@hotmail.com
and ur files wont open
robert
thx though i figured it out
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
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
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?
Aaron McKelvie (Big fan) :P
Hey! I have something i know you wuold know this but it saves needing these lines:
if (dist_x=0 && dist_y
Aaron McKelvie (Big fan) :P
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
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
Robert
change “win” to whatever you have the next levels frame called.
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)
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
Emanuele Feronato
Send it to info[at]emanueleferonato.com
Aaron McKelvie
So I can contact you there?
Emanuele Feronato
Yes sir
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.
n00b5150
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???
Mr.Cody
thx for the help. think u can explain how to go to the next level next?
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)
wolf-orth
lol i cant spell very well coz im thick i ment engin not gegin
Aaron McKelvie
If you download the files they wont work, however you should have no problems running that code. =]
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.
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.
One of the KLA
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
robert
i want part 3 pls cuz i have 18 lvls on mine
robert
here is a link to my game
http://www.newgrounds.com/portal/view/381290
vote and leave comments
robert
the link changed
http://www.newgrounds.com/portal/view/381462
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
Ry
this tutorial was very stupid u only use onClipEvents!!!!!
robert
CODY YOU COULD HAVE LET GO OF SHIFT IT WAS TOGGLE-able
cody
(robert)………ooooohhhhhhhhhhhhhhhhhhhh
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”?
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
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
wazzup
ohh this is my email if you can help me wazzup333@hotmail.co.uk
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!
Youngbluud
sorry, i meant to just say “one of the only tutorials”.
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 ]
Sibux
I love this tutorial.
Robert what did u do to have the cop follow the hero? or can anyone else tell me?
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?
Create a flash game like Security - part 3 at Emanuele Feronato
[...] First of all you should read parts 1 and 2, then follow me and learn to create some interesting things. [...]
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… :(
celie
how do you create an object representing a green line and instance it as “line”?
Zuhair
It does not work for me
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.
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?
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 :)
nick
The line won’t follow me what do I do please help me.
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?
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
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?
swistak
try replace “or” with “&&”
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}])
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.
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.
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
Echo
Hey great tutorial, how do u get the cop to patrol e-mail me echo24six@yahoo.com
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)
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
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
a person
you should make it so you can assassinate him
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? :(