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

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:
-
walk_speed = 3;
-
radius = 8;
-
_root.attachMovie("ground", "ground", _root.getNextHighestDepth());
-
_root.attachMovie("environment", "environment", _root.getNextHighestDepth());
-
_root.attachMovie("player", "player", _root.getNextHighestDepth(), {_x:250, _y:200});
-
_root.createEmptyMovieClip("light", _root.getNextHighestDepth());
-
player.onEnterFrame = function() {
-
if (Key.isDown(Key.LEFT)) {
-
this._x -= walk_speed;
-
}
-
if (Key.isDown(Key.RIGHT)) {
-
this._x += walk_speed;
-
}
-
if (Key.isDown(Key.UP)) {
-
this._y -= walk_speed;
-
}
-
if (Key.isDown(Key.DOWN)) {
-
this._y += walk_speed;
-
}
-
while (_root.environment.hitTest(this._x, this._y+radius, true)) {
-
this._y--;
-
}
-
while (_root.environment.hitTest(this._x, this._y-radius, true)) {
-
this._y++;
-
}
-
while (_root.environment.hitTest(this._x-radius, this._y, true)) {
-
this._x++;
-
}
-
while (_root.environment.hitTest(this._x+radius, this._y, true)) {
-
this._x--;
-
}
-
dist_x = this._x-_root._xmouse;
-
dist_y = this._y-_root._ymouse;
-
angle = -Math.atan2(dist_x, dist_y);
-
this._rotation = angle/(Math.PI/180);
-
};
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.
-
torch_power = 100;
-
torch_step = 100;
-
torch_angle = 60;
-
torch_angle_step = 20;
-
walk_speed = 3;
-
radius = 8;
-
_root.attachMovie("ground", "ground", _root.getNextHighestDepth());
-
_root.attachMovie("environment", "environment", _root.getNextHighestDepth());
-
_root.attachMovie("player", "player", _root.getNextHighestDepth(), {_x:250, _y:200});
-
_root.createEmptyMovieClip("light", _root.getNextHighestDepth());
-
player.onEnterFrame = function() {
-
if (Key.isDown(Key.LEFT)) {
-
this._x -= walk_speed;
-
}
-
if (Key.isDown(Key.RIGHT)) {
-
this._x += walk_speed;
-
}
-
if (Key.isDown(Key.UP)) {
-
this._y -= walk_speed;
-
}
-
if (Key.isDown(Key.DOWN)) {
-
this._y += walk_speed;
-
}
-
while (_root.environment.hitTest(this._x, this._y+radius, true)) {
-
this._y--;
-
}
-
while (_root.environment.hitTest(this._x, this._y-radius, true)) {
-
this._y++;
-
}
-
while (_root.environment.hitTest(this._x-radius, this._y, true)) {
-
this._x++;
-
}
-
while (_root.environment.hitTest(this._x+radius, this._y, true)) {
-
this._x--;
-
}
-
dist_x = this._x-_root._xmouse;
-
dist_y = this._y-_root._ymouse;
-
angle = -Math.atan2(dist_x, dist_y);
-
this._rotation = angle/(Math.PI/180);
-
light.clear();
-
light.lineStyle(1, 0xffffff);
-
for (x=0; x<=torch_angle; x += (torch_angle/torch_angle_step)) {
-
light.moveTo(this._x, this._y);
-
ray_angle = angle/(Math.PI/180)-90-(torch_angle/2)+x;
-
ray_angle = ray_angle*(Math.PI/180);
-
light.lineTo(this._x+(torch_power)*Math.cos(ray_angle), this._y+(torch_power)*Math.sin(ray_angle));
-
light.lineTo(this._x, this._y);
-
}
-
};
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.
-
torch_power = 100;
-
torch_step = 100;
-
torch_angle = 60;
-
torch_angle_step = 20;
-
walk_speed = 3;
-
radius = 8;
-
_root.attachMovie("ground", "ground", _root.getNextHighestDepth());
-
_root.attachMovie("environment", "environment", _root.getNextHighestDepth());
-
_root.attachMovie("player", "player", _root.getNextHighestDepth(), {_x:250, _y:200});
-
_root.createEmptyMovieClip("light", _root.getNextHighestDepth());
-
player.onEnterFrame = function() {
-
if (Key.isDown(Key.LEFT)) {
-
this._x -= walk_speed;
-
}
-
if (Key.isDown(Key.RIGHT)) {
-
this._x += walk_speed;
-
}
-
if (Key.isDown(Key.UP)) {
-
this._y -= walk_speed;
-
}
-
if (Key.isDown(Key.DOWN)) {
-
this._y += walk_speed;
-
}
-
while (_root.environment.hitTest(this._x, this._y+radius, true)) {
-
this._y--;
-
}
-
while (_root.environment.hitTest(this._x, this._y-radius, true)) {
-
this._y++;
-
}
-
while (_root.environment.hitTest(this._x-radius, this._y, true)) {
-
this._x++;
-
}
-
while (_root.environment.hitTest(this._x+radius, this._y, true)) {
-
this._x--;
-
}
-
dist_x = this._x-_root._xmouse;
-
dist_y = this._y-_root._ymouse;
-
angle = -Math.atan2(dist_x, dist_y);
-
this._rotation = angle/(Math.PI/180);
-
light.clear();
-
light.lineStyle(1, 0xffffff);
-
for (x=0; x<=torch_angle; x += (torch_angle/torch_angle_step)) {
-
light.moveTo(this._x, this._y);
-
ray_angle = angle/(Math.PI/180)-90-(torch_angle/2)+x;
-
ray_angle = ray_angle*(Math.PI/180);
-
for (y=1; y<=torch_step; y++) {
-
if (environment.hitTest(this._x+(torch_power/torch_step*y)*Math.cos(ray_angle), this._y+(torch_power/torch_step*y)*Math.sin(ray_angle), true)) {
-
break;
-
}
-
}
-
light.lineTo(this._x+(torch_power/torch_step*y)*Math.cos(ray_angle), this._y+(torch_power/torch_step*y)*Math.sin(ray_angle));
-
}
-
};
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
-
torch_power = 100;
-
torch_step = 100;
-
torch_angle = 60;
-
torch_angle_step = 20;
-
walk_speed = 3;
-
radius = 8;
-
_root.attachMovie("ground", "ground", _root.getNextHighestDepth());
-
_root.attachMovie("environment", "environment", _root.getNextHighestDepth());
-
_root.attachMovie("player", "player", _root.getNextHighestDepth(), {_x:250, _y:200});
-
_root.createEmptyMovieClip("light", _root.getNextHighestDepth());
-
player.onEnterFrame = function() {
-
if (Key.isDown(Key.LEFT)) {
-
this._x -= walk_speed;
-
}
-
if (Key.isDown(Key.RIGHT)) {
-
this._x += walk_speed;
-
}
-
if (Key.isDown(Key.UP)) {
-
this._y -= walk_speed;
-
}
-
if (Key.isDown(Key.DOWN)) {
-
this._y += walk_speed;
-
}
-
while (_root.environment.hitTest(this._x, this._y+radius, true)) {
-
this._y--;
-
}
-
while (_root.environment.hitTest(this._x, this._y-radius, true)) {
-
this._y++;
-
}
-
while (_root.environment.hitTest(this._x-radius, this._y, true)) {
-
this._x++;
-
}
-
while (_root.environment.hitTest(this._x+radius, this._y, true)) {
-
this._x--;
-
}
-
dist_x = this._x-_root._xmouse;
-
dist_y = this._y-_root._ymouse;
-
angle = -Math.atan2(dist_x, dist_y);
-
this._rotation = angle/(Math.PI/180);
-
light.clear();
-
light.lineStyle(1, 0xffffff);
-
light.moveTo(this._x, this._y);
-
for (x=0; x<=torch_angle; x += (torch_angle/torch_angle_step)) {
-
ray_angle = angle/(Math.PI/180)-90-(torch_angle/2)+x;
-
ray_angle = ray_angle*(Math.PI/180);
-
for (y=1; y<=torch_step; y++) {
-
if (environment.hitTest(this._x+(torch_power/torch_step*y)*Math.cos(ray_angle), this._y+(torch_power/torch_step*y)*Math.sin(ray_angle), true)) {
-
break;
-
}
-
}
-
light.lineTo(this._x+(torch_power/torch_step*y)*Math.cos(ray_angle), this._y+(torch_power/torch_step*y)*Math.sin(ray_angle));
-
}
-
light.lineTo(this._x, this._y);
-
};
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.
-
torch_power = 100;
-
torch_step = 100;
-
torch_angle = 60;
-
torch_angle_step = 20;
-
walk_speed = 3;
-
radius = 8;
-
_root.attachMovie("ground", "ground", _root.getNextHighestDepth());
-
_root.attachMovie("environment", "environment", _root.getNextHighestDepth());
-
_root.attachMovie("player", "player", _root.getNextHighestDepth(), {_x:250, _y:200});
-
_root.createEmptyMovieClip("light", _root.getNextHighestDepth());
-
player.onEnterFrame = function() {
-
if (Key.isDown(Key.LEFT)) {
-
this._x -= walk_speed;
-
}
-
if (Key.isDown(Key.RIGHT)) {
-
this._x += walk_speed;
-
}
-
if (Key.isDown(Key.UP)) {
-
this._y -= walk_speed;
-
}
-
if (Key.isDown(Key.DOWN)) {
-
this._y += walk_speed;
-
}
-
while (_root.environment.hitTest(this._x, this._y+radius, true)) {
-
this._y--;
-
}
-
while (_root.environment.hitTest(this._x, this._y-radius, true)) {
-
this._y++;
-
}
-
while (_root.environment.hitTest(this._x-radius, this._y, true)) {
-
this._x++;
-
}
-
while (_root.environment.hitTest(this._x+radius, this._y, true)) {
-
this._x--;
-
}
-
dist_x = this._x-_root._xmouse;
-
dist_y = this._y-_root._ymouse;
-
angle = -Math.atan2(dist_x, dist_y);
-
this._rotation = angle/(Math.PI/180);
-
light.clear();
-
light.beginFill(0xffffff, 100);
-
light.lineStyle(1, 0xffffff);
-
light.moveTo(this._x, this._y);
-
for (x=0; x<=torch_angle; x += (torch_angle/torch_angle_step)) {
-
ray_angle = angle/(Math.PI/180)-90-(torch_angle/2)+x;
-
ray_angle = ray_angle*(Math.PI/180);
-
for (y=1; y<=torch_step; y++) {
-
if (environment.hitTest(this._x+(torch_power/torch_step*y)*Math.cos(ray_angle), this._y+(torch_power/torch_step*y)*Math.sin(ray_angle), true)) {
-
break;
-
}
-
}
-
light.lineTo(this._x+(torch_power/torch_step*y)*Math.cos(ray_angle), this._y+(torch_power/torch_step*y)*Math.sin(ray_angle));
-
}
-
light.lineTo(this._x, this._y);
-
light.endFill();
-
ground.setMask(light);
-
};
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.
They can be easily customized to meet the unique requirements of your project.
40 Responses to “Create a survival horror game in Flash tutorial – part 1”
Leave a Reply
Trackbacks
-
GadgetGadget.info - Gadgets on the web » Create a survival horror game in Flash tutorial - part 1 on
September 26th, 2007 9:23 pm
[...] David wrote an interesting post today!.Here’s a quick excerptThis 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 Games » Create a survival horror game in Flash tutorial - part 1 on
September 30th, 2007 3:03 am
[...] Harold Goldberg wrote an interesting post today onHere’s a quick excerpt [...]
-
ThemePassion - Best stuff about design! » Create a survival horror game in Flash tutorial - part 1 on
October 11th, 2007 3:42 am
[...] Olaf wrote an interesting post today!.Here’s a quick excerptThis 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 … [...]
-
Adobe Flash Tutorial Part 2 on
September 8th, 2008 10:58 am
[...] 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. [...]
-
Actionscript (3.0 - AS3) / Flash Resources / Tutorials for Game Development | i3d on
May 15th, 2009 2:42 am
[...] Emanuale Feronato:Â http://www.emanueleferonato.com/2007/09/26/create-a-survival-horror-game-in-flash-tutorial-part-1/ [...]
-
Create a survival horror game in Flash tutorial – part 1 | Tutorial Collection on
July 2nd, 2009 3:53 am
[...] View Tutorial No Comment var addthis_pub="izwan00"; BOOKMARK This entry was posted on Thursday, July 2nd, 2009 at 7:23 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Posts
- Rick Triqui: my first PlayCrafter game
- Prototype of a Flash game like Meeblings
- Games for the game developers!
- The art of debugging
- How to embed a text file in Flash
- Create a Flash game in minutes with PlayCrafter
- Upgrade your Flash CS4 to 10.0.2
- Play Mazeroll, my latest Box2D game
- Triqui MochiAds Arcade plugin for WordPress Released!!
- The MochiAds funnel
- Flash game creation tutorial - part 1
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Create a flash draw game like Line Rider or others - part 1
- Create a Flash Racing Game Tutorial
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash artillery game - step 1
- Create a flash draw game like Line Rider or others - part 5
- Flash game creation tutorial – part 5.2




(4.9 out of 5) - Flash game creation tutorial – part 3




(4.86 out of 5) - Creation of a platform game with Flash – step 2




(4.84 out of 5) - Create a survival horror game in Flash tutorial – part 1




(4.82 out of 5) - Create a flash artillery game – step 1




(4.82 out of 5) - Create a Flash Racing Game Tutorial




(4.8 out of 5) - Create a flash artillery game – step 2




(4.75 out of 5) - New tile based platform engine – part 6 – ladders




(4.74 out of 5) - Flash game creation tutorial – part 2




(4.73 out of 5) - The experiment – one year later




(4.7 out of 5)


Wow, great tutorial!
That really is a cool concept, and it looks great so far. =)
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.
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.
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
yea cool but how do you make games like endless war.i really want to know.
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. :)
after I insert the last code, everything works except the screen doesn’t go black…Why???
And why does the light looks so unreal? It simply goes through corners! How this can be fixed?
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.
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.
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.
When will the next part come out. This is really cool but I wanto to do more with it!
which program you use to create this game in flash?
wow ! owesome tutorials ! glad i found this site :)
This is a completely amazing tutorial, thank you!
Can’t wait to see the rest!
I spent hours working on this and it never ever worked.
PLEASE HELP
awsome tutorial. cant wait for the next one….when is that comin out
men… your goooood…
hey cool tutorial. I was wondering when does the next one come out
seriously. it does say “Create a survival horror game in Flash tutorial – *PART 1*”
or was that a typo?
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
Ey Feronato.
As so many others it would also help
me alot with the next tut.
thx
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.
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.
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???
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!