Create a survival horror game in Flash tutorial – part 1

This is the beginning of a new and very funny tutorial serial that introduce some concepts I’ve never seen before in a Flash game.

We’ll learn how to create the engine for a survival horror game.

From Wikipedia: Survival horror is a video game genre in which the player has to survive against often undead or otherwise supernatural enemies, typically in claustrophobic environments and from a third-person perspective.

I am going to create a very dark, claustrophobic ambient. This tutorial is inspired by a spanish tutorial I found here, but I am going beyond the concepts explained there.

Before you continue, I suggest you to read Create a flash game like Security – part 1 tutorial.

Now, as usual, I introduce the objects involved in this project

Survival horror

environment: the obscure room where you found yourself abandoned with no hope to survive

player: the poor victim of evil vampires from outer space

ground: the ground where you’ll find death (note by myself: SHUT UP!!!)

ground.png: the texture mapping the ground

And now, in the first and only frame of our main scene, the actionscript:

Line 1: Initializing player’s speed

Line 2: Player’s radius

Lines 3-6: Attaching movies to stage. The only one we won’t use in this first example is the empty movie clip called “light”, but you’ll discover later what are we doing with it.

Lines 7-31: Those lines manage player movements and are identical to the Create a flash game like Security – part 1 tutorial.

Lines 32-35: determining the angle formed by the line going from the player to mouse pointer, and rotating the player facing the mouse using trigonometry. Almost all my tutorials involve trigonometry, but I suggest you to read Create a flash draw game like Line Rider or others – part 3 if you are looking for more information about trigonometry.

That’s it… nothing new at the moment, and we have a walking player that can turn his “head” as you move the mouse.

Now it’s time to get things a little more complicated.

We are going to simulate a torch. A torch basically shots some rays of light.

Let’s do it.

Line 1: Introducing the torch power. Torch power is the distance, in pixels, that the torch will reach.

Line 2: Torch step… I’ll explain later this variable.

Line 3: Torch angle. It’s the angle, in degrees, that the torch can reach.

Line 4: Torch angle step. Basically, the number of rays. In this case, I divide 60 degrees by 20 steps, having one ray every 3 degrees. The higher the number of steps, the more accurate the ray of light, the slower the game. It’s up to you to balance these values.

Line 40: Clearing the movieclip called “light”

Line 41: Setting the line style to a white, one pixel line. For more information about Flash drawing, read Create a flash draw game like Line Rider or others – part 1.

Line 42: Beginning of the cycle to be executed torch_angle_step times (once per ray of light)

Line 43: Moving the pen to the center of the player

Line 44: Determining the angle (in degrees) of the x-th ray, according to player’s angle, using trigonometry. In this case, if the player has an angle of 90, being the torch angle set to 60, rays will go from 60 (90-60/2) to 120 (90+60/2)

Line 45: Converting the angle in radians to be used by Flash Math functions

Line 46: Drawing a line from the actual pen position (player center, according to line 43) with a length of 100 pixels (torch_power) in the angle determined before, using trigonometry

Line 47: Moving the pen again to player center. This line is pretty useless because does the same of line 43 and it’s inside the same loop, don’t really know why I included in the script when I wrote it…

And that’s it… now the player shots the rays of light from his torch.

Next problem is… my rays of light shouldn’t go through walls. I have to follow every ray of light and make it stop when it reaches a wall.

Line 46: This is where I use the torch_step variable defined in line 2. I divide every ray in a number of steps, for every step I check if the ray of light is hitting a wall. If a ray of light hits a wall, it must stop. The higher the number of steps, the more accurate the simulation, the slower the game. Again, it’s up to you to balance the game.

Line 47: If the x-th ray of light at its y-th step hits a wall, exit from the loop

Line 48: Draw the ray of light only until the position we found to hit the wall

Here it is our player with a real torch in his hands.

Now it’s time to transform the rays of light in an “area of light” as if rays were infinite (like they are in real life). I can do this task only changing a line

As you can see, I move the pen to player’s centre only once, in line 42. Then I draw next lines from an end of the ray of light to another in line 51, and I return from the last ray to the player’s centre at line 53. This allow me to define an area according to my rays of light.

Now that I have a “realistic” torch, it’s time to solve the last problem: I don’t have to see anything outside the light of the torch. In order to do it, I’ll use a mask.

If you want to know more about masking, read Creation of realistic spheres in Flash with textures and masking.

Line 41: Beginning to fill the shape I will create.

beginFill wants two arguments: the color to fill and the alpha. In my case, I am using a completely opaque white.

Line 55: Defining the end of filling. Basically you have to call beginFill before you start drawing the shape to fill, and endFill after you finished drawing the shape

Line 56: Masking the ground (the floor texture) with the shape just created. I don’t need to mask walls because they are black already.

The result is very good in my opinion (it’s a bit slow because we have 5 cpu expensive movies in one page)

The player is moving around the stage in a complete dark room, with only his torch protecting him from evil werepets from deep sea… this is a pretty new concept in Flash games, isn’t it?

In next part, I’ll introduce enemies and powerups, meanwhile download the source codes and give me feedback.

  • Pingback: GadgetGadget.info - Gadgets on the web » Create a survival horror game in Flash tutorial - part 1()

  • Wow, great tutorial!

    That really is a cool concept, and it looks great so far. =)

  • AAR

    Awomse! Great tutorial! I love it

  • Very nice!

  • This is one of my favorite tutorials so far Emanuele!! Please..Keep up the good work!!! You’re amazing :)

  • It would be really awesome if the light didn’t have such a straight edge – if it was blurry you might be able to see the enemies vaguely if they weren’t in the focal area, which would make the game even scarier :P

  • great tutorials, great to see a site that goes beyond the normal clones and come up with something original and easily explained.

  • Pingback: Video Games » Create a survival horror game in Flash tutorial - part 1()

  • Pingback: ThemePassion - Best stuff about design! » Create a survival horror game in Flash tutorial - part 1()

  • Hai Dang

    Great Tutorial, it would be cool if there are more maps/level like the security tutorial you did. also, a small map like many rpg games is cool. Please make this into a real game, i wanna play.

  • miguel(lito)

    cool tut
    how about you make a tut
    about making a game like
    B.L.A.C.K./B.L.A.C.K. 2
    play the game here http://www.ugoplayer.com/games/black2.html

  • Chris

    yea cool but how do you make games like endless war.i really want to know.

  • jim

    if you could just add guns and enemies it would be perfect

  • Thanks for an awesome tutorial, it helped me alot!
    After a while when I understood how the sytem worked, I figured at way improve the performance of the game.
    Here’s how you do it, change line 1 and 2 to:
    torch_power = 25;
    torch_step = 25;

    And then change line 48 to:
    if (environment.hitTest(this._x+(torch_power/torch_step*(y*4))*Math.cos(ray_angle), this._y+(torch_power/torch_step*(y*4))*Math.sin(ray_angle), true)) {

    And line 52 to:
    light.lineTo(this._x+(torch_power/torch_step*(y*4))*Math.cos(ray_angle), this._y+(torch_power/torch_step*(y*4))*Math.sin(ray_angle));

    There you go, the game should now run smoother. :)
    The way this works is that the ray line gets drawn 4 pixels for y-loop, the old way the line was draw pixel for pixel and this was a very performance heavy way of doing it because it had to check evert pixel for an enviroment collission, now it just check every 4th pixel. :)

    So now when the line drawing performance is enhanced, you can try do increase the vaule of torch_angle_step to 40 or 50 for a smoother light.

    Sorry for this messy comment and bad english, but I hope it helped somebody. :)

  • Gonzalo

    after I insert the last code, everything works except the screen doesn’t go black…Why???

  • Andie

    And why does the light looks so unreal? It simply goes through corners! How this can be fixed?

  • Andie

    So, I got it. But if this is fixed, the game is very slow. I hope there’s another method to make such game.

  • IF you change the frame rate from 12 to 24 it is much smoother and faster.

  • Carl

    I really really like this tutorial. It’s a very nice new concept to flash games, but I was wondering if you could introduce a second part and add in bad guys? Again, very nice.

  • Decoy

    This is an awesome tutorial. I do have one suggestion. Consider creating a wall border graphic that the player can’t walk through, but that the light can penetrate. Thus you can get a nicely defined wall image to make it feel even more claustrophobic as well as being able to change the graphic to reflect location change.

    I haven’t read the code thoroughly enough to know whether that would be difficult or not. If I get time I’ll implement something.

  • Chris

    When will the next part come out. This is really cool but I wanto to do more with it!

  • Lucas Rodrigues Ribeiro

    which program you use to create this game in flash?

  • wow ! owesome tutorials ! glad i found this site :)

  • Travis

    This is a completely amazing tutorial, thank you!
    Can’t wait to see the rest!

  • Knight

    I spent hours working on this and it never ever worked.
    PLEASE HELP

  • jake

    awsome tutorial. cant wait for the next one….when is that comin out

  • Pingback: Adobe Flash Tutorial Part 2()

  • val

    men… your goooood…

  • shadowraith

    hey cool tutorial. I was wondering when does the next one come out

  • Nathan

    seriously. it does say “Create a survival horror game in Flash tutorial – *PART 1*”

    or was that a typo?

  • Jeremy

    pls make part 2 i really want it

  • Hey Feronato. i’m currently working on a rpg survival game in flash, and this tut really helped me. If you have any files at all of part 2, I would be really happy. Im a graphic designer, with all the graphic work for my game done – now im just playing with the scripts.

    regards

  • Casper

    Ey Feronato.
    As so many others it would also help
    me alot with the next tut.

    thx

  • Arashi

    Does anyone know how to edit the Environment? I want
    to make the map bigger and more complex but it will not let me do anything to the Movie clip file…

    I really need some help here…!

    any response would be welcome ^^
    (although I kinda need it in the next few days if at all possible)

  • Please send me the items I need to start and the complete guide/tutorial that is considered to be what it is to happen.. And also, I would like to know if you have any RPG tutorials and items to start one of those also.

    P.S. Please try and get back with me as soon as possible.

    Thank you,
    Breadsoft Team.

  • Pingback: Actionscript (3.0 - AS3) / Flash Resources / Tutorials for Game Development | i3d()

  • KAAPOW

    Dude, u should make tht te character a bit darker like his “bottom” bit.. and gradually make him lighter as he gets closer to the torch.

  • Lordtac

    Hey this is a great tutorial but I am having alot of trouble trying to link “hit-Tests” to the player through the “ground” (so enemies arn’t seen immediatly)

    How would one go about doing this? I’ve trie the _level0 trick

    _level0.ground.death.hitTest

    the _root isn’t working either.

    _root.ground.death.hitTest

    then I tried a direct link through instance name but probly didn’t do it right.

    death.hitTest

    so how would I link a hit-test directly to the player???

    • Fictional

      If you wanted to link it through the player object I think you would put
      if (self.hittest(_root.ground)

      or
      if (self.hittest(_root._level0.ground)

  • Muntern

    Hello!

    I’ve a problem!

    If I wanna use this code on the “Guards” how can I fix that? Please send me an e-mail how to do that, that would be great!

    Best Regards Zakarias!

  • Pingback: Create a survival horror game in Flash tutorial – part 1 | Tutorial Collection()

  • Pingback: Como criar jogos em Flash()

  • Thankyou so much, you are awesome at flash!

  • neel

    can you plz create enemy on this game. tutorial is good but not full.

  • Skaruts

    Where’s the next part??

    (I googled for it but… nothing…)

  • Gabriel

    this was really helpful :)
    although I didn’t find part 2 I just used part 1 combined with my own knowledge and it turned out great!!!!
    thank you!

  • elias

    alguem fala minha ligua ai????
    como eu faço o jogo??
    avida seria mais facil se existisse só uma lingua

  • Simon Li

    I didn’t carefully look at the tutorial, but this might help me a lot to make another flash game, escape.
    By the way, can you teach me how to do a true torch effect? I mean when the lghts go more far, the alpha of it goes more down.

  • tom

    anyone know how to port the torch into AS3, using a pre-drawn mask at the moment but want it to stop at walls like this one

  • Don_Doh

    Absolutely super great !!
    this tutorial is exactly what I was hoping to find :)
    and VERY nicely explained, thanks a lot Emanuele :)
    Just a shame there is no part 2 (yet?), with enemies and stuff, but I hope to be able to figure that out myself (or by looking in other tutorials),

    An other things there could be great, were to make it a scrolling type of game.
    but I hope to figure that out too, with help from other tutorials.

  • plasmacannon

    still waitin for teh second part wish you would finsh it
    oh to some things by exspanding your arena

  • Eddie

    Any ideas on how to re-write the same code but in Actionscript 3.0? Any chance of an Actionscript 3.0 Tutorial for this or some pointers on how to correct the 2.0 code to 3.0

  • Pingback: Create a survival horror game in Flash – AS3 version - Emanuele Feronato()

  • Ian

    Um… it would be great if you could just add undead people and also guns to shoot them down?

  • Jesse

    Any problems with using CS4 instead of CS3? I used pretty much the same exact coding as used above(Nothing that would affect the “light”), except when I test the Movie, all the shading that should be black is white.
    Any suggestions?

    Great tutorial otherwise, 5/5.

    • Jesse

      Ah… nevermind, I figured it out… the “shadows” are the same color as the stage color. I had my stage color set to white. And it works fine when transferred to CS4 version! Hope anyone that has the same problem finds this helpful.

  • Matt

    @Ian: You can reference the Create a Game Like Boxhead to make zombies that follow the main character, then just modify the script so they rotate through all degrees instead of just every 45. For weapons, I’m sure you can code that in yourself if you’re able to successfully modify the boxhead code. Score, HitPoints, the rest all evolves from there fairly intuitively compared to what is described in this tutorial.

    (Is there a Part 2 coming out soon? Which helps describe the integration I mentioned above? Since this is Part 1 and it was created ~3 years ago, a Part 2 would be logical)

  • Jesse

    I had an idea when playing a game… Couldn’t you also use pretty much the same line function as used for the torch to simulate gunfire? Here’s the game which I think actually does that. http://www.kongregate.com/games/ArmorGames/the-next-floor
    Instead of making it go every whatever degrees and then drawing a line, make it draw a line using something like:
    ray_angle = (Math.random()*(-10)+20) + (angle/(Math.PI/180));
    And the angle would be a random number between the player angle – 10 and the player angle + 10.

  • Jesse

    If you could go in-depth with which exact parts of the trigonometry do what, It would help alot.

  • Simon Li

    I just want to ask:
    1.
    What’s the code of making a movieclip face the mouse all time and put it at which place?
    2.
    How to make a load page?
    Send me an email:
    simonli2575@hotmail.com

  • Anonymous

    WHERE do you get this?

  • funkidud3

    i am trying to learn this tutorial to add a torch to my game, which will eventually be a zombie shooter game. But i am currently having trouble figuring out how to move the light to start at the end of a torch my character will be holding instead of the face of the character. The torch is a little to the left and in front.
    Right now i only wish to know which values i have to edit to move the position of the light to appear as if it is coming out of the torch.
    Also it would be good, but not necessary, if someone could help me so that the touch light doesn’t just end, but to slowly fade out, like a gradient.

  • Dude, your tutorials are awesome
    keep it up
    i love your tutorialsss !!!!!!!!!! :D !!!

  • Pat

    if it only had a finish line it would be really awesome!

  • Aszka

    Great tutorial!
    I have 1 problem. I’m trying to make bigger level. I put all MovieClips in another MovieClip called “world”, so it’s now _root.world.player, _root.world.enviroment etc. I want to move _root.world on the main stage, so the _root.world.player stays in the middle of the screen. I used simple _root.world._x++ first. It turned out that collisions between player and enviroment are not correctly detected. It seems that walls (enviroment) moved more than 1 pixel, but the picture of the walls is in correct location. It looks like player is colliding with some invisible wall.
    I tried putting this code (_root.world._x++) in different MovieClips – on main stage, in _root.world MC (then i used this._x++ code) etc. No change.
    I moved only _root.world.enviroment and it works good, but I can’t use this method cuz i’ll have to move every object in world MovieClip separately and then making 1 MovieClip containing all other does not make any sense.
    If someone know how to solve this problem I will appreciate for the help. My mail aszka14@poczta.onet.pl

  • Pingback: Como criar jogos online em flash | NR Host Blog()

  • jon

    guys seriously stop asking him to make tutorials on how to make enemys if you really want to know go to some of his other tutorials or just simply google it

  • lars

    great tut!

    and when will part 2 come out??

  • great! great! great! great! great!
    i really need this!
    thanks a lot dude!

  • S. Cochrane

    This tutroial just my save my butt in a class. I totally do not understand computer language, but this is helping me immensely. Thank you. It has given me great ideas and directions to go.

  • joshua

    i have a problem. after i followed the tutorial i can still see the whole maze and the the is masking the background only

  • Liam

    Thank you so much emanuele, and also ripex for helping with performance issues

  • Hannah

    Hi Emanuele!
    I am having some issues with this tutorial. when i try to run the script a whole bunch of errors pop up. I am wondering if you could give me some feedback or helpful advice. The errors are all “1120 Access of undefined property”. Did I miss a part of the script or do something wrong? I can send you the project to look over through my email if you want. Please get back to me and help me solve this problem.
    Thanks!

  • Ygr3ku

    2 years have passed and part 2 is not yet out…mail me when out or someone who know how to add “demons”…10x alot !!!

  • The code works nice, thanks! Nevertheless I have a question: Why does the line 45 has that – 90 in the middle of the calc?

    ray_angle = angle/(Math.PI/180)-90-(torch_angle/2)+x;

  • TLa

    Hey!,emanuele, you’re supposed to continue this !You start making it on 2007 but up to 2011 i see no second part, that’s pretty bad man i know i like as2 as much as you do but shouldn’t
    you make it in as3
    i’m sorry if i was rude
    BY TLA,13 year old flash Noob.

  • Very good tutorial, thanks…..

  • E.D.I.

    @#73 Richardo

    The -90 is needed to let the torch point in the correct direction. 90° are one quarter of a circle. If you go straight to the right —> then it’s 0 degrees for flash. If you subtract 90°, the arrow will point up ^
    Another solution would be to draw the player MC pointing to the left, instead of to the top… However, then you’d need to play with the angles, as the player MC won’t look at the mouse directly, but, as you might expect, be off by 90 degrees, so you’d need to add/subtract the 90 degrees somewhere, be it on the atan2 function, letting the player “look at” the mouse cursor, or be it the angles of the light rays… (BTW, I think it would be less CPU-intensive to make the subtraction for the player MC… After all, there are multiple rays to calculate. *jk* those 8 calculations probably won’t make a measurable difference)

  • anonimo23

    did not work on my………..

  • vinoth

    really superb tutorial…

  • Gilson

    Hi, wonderful tutorial and wonderful website. Do you have any plans on coverting this tutorial to AS3? I’m having a hard time to produce the torch on as3.

    Thank you :)

  • Gu

    Greet idea?

  • Gu

    Sorry,I made a mistake ,the“?”should be“?”.

  • Pingback: Como criar um jogo online()

  • I love the horror game

  • Gonzalo

    Please Emanuel show us how to light enemies

  • I swear, everytime i search for something concerning my game dev in flash in end up on your site.

    i spent 2 hours googling for ligth tutorials and stuff and where do i end up? on your blog. you really are awesome guy Emanuele!

  • skerdi

    this will help me create my flash game but i would be very greatful if you would show us how to make a dustructabe terrain in a flash game

  • ArturoTrivellini

    Hello, what tool did you use to develop this game? I really want to try this!

  • Hello!

    Where can I find the part 2 of this game tutorial?

    I searched through this page but no link to the second part of its tutorial?

  • Evan R Clark

    I coppied the coding exactly (having never used AS2 before) but whenever my player moves into the environment in the x direction it skips up and to the right. Also the torch ‘goes out’.
    Any help please?

  • Koerie Willsdon

    I really appreciate your tutorials, dude. I know this was made an age ago but i hope you can see my thanks here today! I am going to use a modified version of this code for a game I have in the works. You’ll be credited! And thanks again!

  • abbelsin

    I found a cool efect for the light, just add black inner glow on the ground and the ligt looks nicer. :D

  • Pingback: Creating a basic game in Flash | 9 multimedia@mr()

  • Pingback: Dynamic light simulation with canvas - Yannick Lohse()

  • é uma caverna que tem muitos sustos animais escuro bandido tiroteio lago

  • hi, i want to make this game, but i want to make the little guy pick up a coin, and before a time limit, so if he doesnt find the coin in the time limit a monster gets him…please help? thanks

  • demyx3

    Maybe you could put lamps?

  • Samuel Lapointe

    It’d be great to have a newer version of this tutorial with an A to Z on how to make it.
    I find it hard to find good and well explaining Actionscript 3 tutorials for 2d games.

    I know there are books and some websites, but nothing seems to convince me that I’ll have everything I need after I read and practiced what they teach.

    If you’re not doing a new tutorial for it, any suggestion where I could learn properly?

  • Pingback: A quick HTML5 survival horror prototype made with Phaser - Emanuele Feronato()

  • Pingback: Phaser tutorial: how to create an HTML5 survival horror game in 6 easy steps | Emanuele Feronato()

  • Pingback: Como criar jogos online em flash | Diretorio 10()

  • Lauro

    Excelente tutorial… Sou iniciante no assunto, mas vou me esforçando. Muito ansioso pela parte 2… Very, very, very good!!!