Flash game creation tutorial – part 5.3

Let’s go with another step.

In this part, we’ll learn how to (almost) complete our first game… a tunnel race game.

Read tutorials from 1 to 5.2 if you haven’t done it already and follow me in the game creation.

I’ll continue from the code optimization seen in part 5.2, to continue adding features to the scrolling game.

Adding a timer

If you plan to make a racing game, the timer is very important. Some of the topics covered in this example are taken from the Flash simple timer/countdown tutorial.

Line 4: Nothing to do with the timer, but I added a background to the cavern. The way I added the background is the same I added the main cavern. Look at the depth (0)… the background is behind all other objects

Line 5: Here I add the movieclip that will contain the timer. Look at the depth (12000)… the timer is in front of all aother objects. In the timer object I have a textarea called time_left that will be updated. We will add all texts covered in this tutorial in the same way

Lines 15-16: Timer setup… I want the level to be completed in 60 secods = 60,000 milliseconds. Again I strongly recommend to read the Flash simple timer/countdown tut.

Line 19: Determining elapsed time

Line 20: The text area time_left inside the movieclip count_down is updated according to the function time_to_string (lines 56-87). You can find this function fully explained… guess where?… Yes, at Flash simple timer/countdown tutorial!

You will notice nothing happens if the time reaches zero… I wanted it to fully test the game. You hould always test the game in a “god mode” to verify all levels are designed correctly, then start testing it in “normal mode”.

The energy

Now, let’s imagine we do not want the player to die if he hits the wall, but we want instead he to lose “energy” or “shields” or “bananas” until it reaches zero.

Line 14: Set the starting energy at 100

Line 15: Display player energy on screen

Line 51: In case of collision, the player does not die but his energy drains according to player speed. The higher the speed, the bigger the damage

Line 55-58: wall and background are resetted to their last position where no collision was detected

Lines 59-62: if there wasn’t a collision, save actual position (with a little offset due by player speed)

These last lines remind a bit the collision checking seen in flash draw game tutorial part 4.

Now, next feature…

The brakes

I want the player to have the capability of using brakes, even if for a limited amount of time.

Line 15: Set the starting amount of brakes to 100

Line 17: Display player brakes on screen

Line 38: Checking if the player is braking (or pressing spacebar…) and the player has brakes left

Lines 39-42: Player speed is reduced by a half, brakes are reduced and new brakes value is displayed on the screen

Now we have all the information required on screen. Time to show them in a clearer way.

Text styles

Let’s see how to give some style to our texts

Lines 16-24: Note how I use the with statement to change brake text attributes.

According to Adobe Livedocs, the attributes you may be interested in are:

_alpha:Number – Sets or retrieves the alpha transparency value of the text field.

background:Boolean – Specifies if the text field has a background fill.

backgroundColor:Number – The color of the text field background.

border:Boolean – Specifies if the text field has a border.

borderColor:Number – The color of the text field border.

filters:Array – An indexed array containing each filter object currently associated with the text field. (you can see some filters in action in draw game creation tutorial part 1)

html:Boolean – A flag that indicates whether the text field contains an HTML representation.

htmlText:String – If the text field is an HTML text field, this property contains the HTML representation of the text field’s contents.

_rotation:Number – The rotation of the text field, in degrees, from its original orientation.

text:String – Indicates the current text in the text field.

textColor:Number – Indicates the color of the text in a text field.

_x:Number – An integer that sets the x coordinate of a text field relative to the local coordinates of the parent movie clip.

_y:Number – The y coordinate of a text field relative to the local coordinates of the parent movie clip.

Lines 25-33: Same thing with the enery text

Lines 34-41: Same thing with the timer text

Lines 66-71: If the brakes are damaged (<60) or critical (<30), I change brakes text color to yellow or red Lines 90-95: Same thing with the energy text

Now we have a nice text representation… let’s cover another thing…

Advancing levels

What kind of game do we have if we cannot advance levels? Now I am teaching you how to add new caves.

In the movieclip where you have the first cavern, simply add a frame and draw another cavern. You can add how many caverns you want, just remember to put a stop() in each frame and to add, in the end of the cave, a movieclip instanced as end

Line 7: array with the 3 _x starting position of the level walls

Line 8: array with the 3 _y starting position of the level walls

Line 9: initializing starting level to 1

Line 10: calling the position_bg function. This function, located at lines 158-164, simply performs a gotoAndStop to the current level (frame) and places walls and backgrounds in their starting positions (declared in lines 7 and 8) according to the level

Line 94: When the player hits the wall, another test is performed to see if the player is hitting the end. If not, the game continues in the same way seen previously

Lines 110-122: If the player reached the exit, xspeed and yspeed are set to zero, level is increased, time, brakes and energy are increased by a bonus and the text on screen are updated. Finally, the position_bg function is called again.

Can you beat level 3?

Well, how you may see, I am designing a cavern racing game. Do you want to be part of it? You can! Soon you will find everything you need to design a level or more.

Meanwhile, download all source examples and have fun… until next tut…

  • Pingback: Flash game creation tutorial - part 1 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 3 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 4 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 5.1 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 5.2 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 5 at Emanuele Feronato()

  • Pingback: Flash game creation tutorial - part 2 at Emanuele Feronato()

  • abhilash

    nice tut can’t wait for the next!

  • Joseph

    i want to make a flash game very similar to this one:
    http://www.adultswim.com/games/inuyasha_demon/index.html?showId=324233&name=Inuyasha&timezone=EST

    as it is somewhat different from the tutorial i was wondering if you could give me some tips. or maybe a jump start. or maybe a simple tutorial. o.o

  • abhilash

    may you should stop using the method of assigning actions to frame becoze the earlier method was a way easier than this.

  • mousey

    Ace, Carn’t Wait for the next Step onto making an ultimate game, ! qucik question when the shield get to 0 it dose not re-set

    how could you fix this??

  • Andrej

    It mai saund stupid but i can`t understend wat prigram siould we youse to make this kined of game. maibe you can tell me with is beater to download

  • mousey

    The program is Macromedia Flash!

  • yes it is macromedia flash and sorry to say but you cannot download flash pro 8 which you need. you need to buy the whole thing for
    $300-$600 with a key so sorry.

  • sdobson

    i’ve tested my game in hero mode. I just need to know how to go to a new fram when timer reaches 0. Please!

  • hasna

    @sdobson: idont know relly know but if the timmer is a textbox take this code
    if (_root.texboxname

  • hasna

    eee on my computer the code didnt come up so i post it agian
    if(_root.textboxname

  • Itsame

    yo i got some questions for ya email me plz

  • eblup

    hi can you let theis people think how to make things for themself i made my own jumping code and its beater than any youve ever seen

  • Very nice… is there a way you can provide the connection parameters if we want to get the position of movie clips from a php page? maybe with xml? or nay other way?
    lets say we have a chess setup already in a database, with columns, rows, and piece types…

  • Justin

    Is there anyway in which to make the character so that when it hits into the wall it bounces off but from the edge and not the center of the character?

  • eblup

    to Joseph hey i can help you make a game but ill only help you make 1 enemy and 1 guy and no extra card evrey level so take the offer?

  • Chris

    Great tutorial, but at the part where you set the alpha of the
    text (time left, energy, brake) I just couldn’t get it to work no matter what I tried. But I did get it to work by setting the blend mode of my three movieclips to layer… Can anyone explain why this works?

  • I can’t get the code for changing the frame when the timer reaches zero to work. If I use the code
    if (_root.textboxname = 0){
    gotoAndStop(“frame”)
    }
    it just sets the timer to zero. Why is this happening? (note the code is nestled in the same onClipEvent(enterFrame) handler as everything else, if this makes a difference)

  • Also, what is the code for scaling the size of the level?

  • Yuki Sohma

    Very nice tutorial, I think everyone here appreicates your easy to understand and fun tutorials. Keep it going man!!!

  • Gilberto

    Hi Emanuele Feronato. Uhm, I have a problem with my game… You see, I’m making a game (in flash MX, it uses flash player 6.0) and I want it to look like a Crono Trigger… well my problem is that I want to include a lot of movie clips in the background and I’m using 2 kind of movement (in the center of the screen, the character changes its position x, y and when it hits the edge of the screen, then the background moves)… When I do so, the character and the bachground moves too slowly. I tried to change the vector images to GIF and PNG images but it’s just the same… I’d really appreciate if you answer to my mail dude. By the way, I found your tutorial very useful. Thanks for transmiting your knowledge about flash, I’m sure this will helkp many people. Well, see you.

  • Niall

    How would you make a game like security 2?

  • Emanuele Feronato

    Did not know about this game… but it rocks!
    Expect a tutorial very soon.

  • Niall

    yey!

  • leo

    Can somebody please tell me how to make a couter counting up(a stopwatch)
    i guess its quite easy to do but im only a beginner so i dont have
    a clue.
    please reply to leoleo999@hotmail.co.uk

  • Just wanted to say hi !
    Downloaded all tutorials, will enjoy.
    flanture
    [flash adventure]

  • JectCartoon

    to jordanleffl:
    You can actually download Macromedia Flash Pro 8, you just have to download first “Ares”, then, with this one, download the program, and finally, the serial number…

    Hey, how can I re-set the game once the shield gets to “0”???

  • Guest

    Can’t see the swf file, its black.

  • mickyas

    how do u test the game u made.

  • Jcman

    Hey, I have 2 big question and you surely know the answers.

    *What is the actionscript I should put if I want to go to another frame or scene when all the enemies are dead?????
    and
    *I know how to “kill” enemies when you fire at them, but how do I do to kill them only after 2 shots??????

    I hope you answer me

  • You can simply add energy to the enemies and “kill” them when it is over.
    Very easy way to do that is to add some variables:
    _root.onLoad = function() {
    enemyCount = 50; // if you have 50 enemies
    }
    and then for each killed enemy do enemyCount–; and then check for the number of enemies and if it is zero jump to frame 10 for example ;)
    then for each enemy add his nrg and subtract 1 for each hitTest(), and when enemy energy reaches 0 “kill” him.
    if (evilNRG == 0) {
    this.removeMovieClip();
    enemyCount–;
    }

  • happytodd

    Im going to make a game quite similiar to this with more pixel graphics, and a gender selection and all I just need to be more advanced in actionscript im a noob at this.

  • happytodd

    Ive tried following these steps and Im not as good as I believed I was. With pretty much the first step everytime I test movie (ctrl enter) and I get 2 errors. But it does work but very very jumpy. 2nd im having trouble getting the yellow circles the collecting coins to work. Please help guys email me happytodd@ozemail.com.au

  • Rick

    Great tutorial series!

    Is there a Pool Table (Billiard) tutorial on its way? (or does one already exist?)

  • ok i got to 5.2 and it just stopped working and i dont see any of the games here either, copy and pasting the code(taking out the line numbers and fixing the formatting) doesnt work either, it doesnt create anything on the stage…

  • galaxy

    huh..
    your tutorial is really good!
    i am trying to code something myself.
    its a lil different then your game i have a problem. here is the code:

    if (_root.map.rightwall.hitTest(_x, _y, true)) {
    _root.map._x = power;
    }
    \—\
    if (_root.map.wall1.hitTest(_x, _y, true)) {
    _root.map._x = power;
    _root.map._y = power;
    }

    well it only test 1 named mc that is inside another mc (map mc).

    any solution or ideas how to make it work?

  • I really dig what you’re doing, the only thing is how do I make it so that the line that is drawn is at a lower depth than the other layers? I dont like how you can write over “Draw a line here” box.

    Any help is appreciated!

    1billioN!

  • chupy

    hi.. im using flash MX.. may i know wat version u r using? coz i cant open d file tat downloaded from this website…

    or any1 whoever downloaded this project and save it as MX file? pls help me…

    send to chupy_fish@hotmail.com (msn also can)

  • peter

    my screens are black 2 it says movie not loaded when i right click it, i’ve renewed the page but nothing.

  • yo peter. I’m having the same problem. Probably the flash animations got off of the server.

  • Rapchik Programmer

    I am just getting into flash game programming from 3d game programming and this is one of the best tutorial i have seen yet.. It would be better to update it to action script 3 though..

  • Pingback: A Gem of Flash Game Tutorials | Newbie Game Programmers()

  • Umer

    To understand this we should be able to understand Math fucntions and i gave up

  • Goinginsane

    YES! Emanuele, I have a small favor to ask of you. Would you plese create a FROGGER tutorial. litertaly no one has created one!
    Thank you for the tutorials!

  • Brendan

    I know it wouldn’t be for a while (Even if you did jump to it now, I’d probably be totally lost) but it would be cool if you’d show how to make… like, for example, a first person shooter. Just a thought.

  • Ruiqi Mao

    I made it! I got infinite time, shield, and brakes! Woo-hoo! :)

  • Pamela

    same here

  • I’ll stick to java

  • Splashy5

    How do you make it so when the sheild gets to zero, you die…well go to another frame.

  • Splashy5

    or when the timer ends…

  • Taylor

    Flash tuts seem to be black…can’t see them???

  • Goat

    Haha, yes, i finally beat level three. I’m also making a sidescroller, kind of like Aegis wing*, and i was wondering how to make weapons and stuff, but TY for all the help, it’s AWESOME!.
    *Aegis Wing, is an X-Box live Arcade game, for all of you who don’t know.

  • Goat

    Okay, i seriously loved this Belissima tutorial, however i was wondering something. How on earth do you change the controls from being just the arrow keys, to the WASD format we see so often? I’v made a two-player game, but can’t get any other keys to work so well, one configuration is uncomfortably close to player 1, and the other one is all vertical button alignment. Thanks for the help though, much appreciated. ROCK ON FERONATO!!!

  • for Black Cat

    Hey -Black cat- you make want to use:
    if (_root.textboxname == 0){
    gotoAndStop(”frame”)
    }
    ———————————-
    You were seting the textboxname value to zero.
    “==” test for equality
    “=” sets the value

  • hey how can i send you my game.

  • cant see the game at all?

  • julian

    hi,

    on the scrolling level
    how do you make the end?
    because when the player hits the end it just goes back to the start.
    can you help me?

  • flash movies do not load…

  • Sergey

    Are these flash clips compatible with flash player 10? They don’t load

  • Vikesh

    Thanks for the tutorial. It was awesome to say the least. Learnt lots of stuff from it. You can make it a little more lucid for the absolute beginners by specifying where exactly the script has to be entered at various places.

  • William

    I created a running sprite animation from a sprite sheet, and copied the code from the 1st page of the hero to it, so i could move it. But it would be nice if you could help by creating a code for ground that he could walk on instead of being sent to the middle of the screen when the ground is touched.
    thanks!

  • Black Dragon

    coolll!!!!!!!!!!!

  • I0wrld3r

    Hey, uhhm… I got to level three. Finished it too.

    Mainly because it’s still on god mode on my browser, and now when I hit the exit, my shield + brakes go up. And time, but that was screwed anyway.

  • Swarly

    hey. If you could email me, i’d reaallyy love to know how to pause the game when you hit space and unpause it when u hit space again or another button. Can it be done with a simple action script ok keira?

  • Hey, love the tutorials. They got me into this language, thanks!

  • Also, you guys can check out my site at http://www.rslegion.net

    Can i have some comments on the quality of my tutorials please?

  • Oath

    nice. But

    1) What program do i need to do this

    2) Where do i get it?

    I really want to make this game.

  • Excellent Tutorial!! Thanks a Bunch!

    Thinking of coding in AS3 the next game :)?

  • Michael Stewartt

    I Found a Glitch on Level 2 Where there is a Part of the wall you can get stuck on!!!!

  • Great tutorials, however all the examples from the timer onwards are coming up as a black box on my screen (Tried firefox and chrome) maybe they’re not compatible with the latest flash player. Just a heads up.

  • zard

    instead of using two frames i use _xscale = -100

  • The previews do not work for this step :/ Black screens!

  • jon

    Seconding that the game previews don’t work, only getting black boxes

  • Great set of tutorials easy to understand. Thanks. (Im getting black boxes for the demos too tho.)

  • Nilo Cortex

    Hey, I’ve been following your tutorials and they are more then helpful!
    Is there anyway you can show us how to make a horizontal scroller? I’m interested in making a horizontal barrier that a character walks on.

  • kkm

    that is very good for me, but I use CheatEngine (will stop timeEvent)
    how can stop use with CheatEngine?
    Can it like ajax timer??

  • Clowne

    Great tutorial, thanks for the information.

    What I need to know now is what is the cheapest way to develop flash? What are the best free (or not stupidly expensive) tools out there to compile the code given in these examples? I’m quite keen to get on and knock out a few games as it looks pretty easy.

  • Jesta Blunt

    great tutorials on your site, but on this page the previews dont work for me too… :(

  • Andaho

    Very strange how I get black boxes in chrome… when I right click I get the message “movie not loaded”, but in IE8 they work fine.

  • nathan waldron

    on part 5.3 the swf’s are not showing on Ur tutorial

  • Foobius

    Heres the game i made using this great tutorial:
    http://megaswf.com/serve/1007486
    its my first attempt at making games and took me 1 day to make
    cheers and thanks for tutorial

  • Kaz

    I am trying to create a game in Adobe Flash Professional CS5 using ActionScript 3.0, but when I try to test the game (I’m still in Part 1) the character doesn’t move and an error appears: “Scene 1, Layer ‘Layer 1’, Frame 1, Line 1 1086: Syntax error: expecting semicolon before leftbrace.” But when I put the semicolon before the leftbrace even more errors appear! How can I solve this problem?

  • Mully

    Works in IE.

  • Ishida

    Am I the only one having this problem?

    When I play your tutorial examples I have infinite shield, because when shield reaches 0, it continues in negative.

  • ivan

    hey, gran tutorial, eres el mejor!(great tutorial, you’re the best)

  • andy

    Emanuele, Nathan is right! Your swf samples do not show up here either, I have no idea why.
    However, the files are there: I could invoke them by just peeking into the HTML and writing them down from the code…

    one of them is /downloads/end.swf

  • andy

    Ah it’s a typo in HTML code! Emanuele I will contact you directly so you can fix the typo.