Flash game creation tutorial - part 5.1

February 9, 2007 by Emanuele Feronato
Filed Under Flash •  

March 14th update: part 5.3 released.
March 3rd update: part 5.2 released.

Well, since lots of readers commented and mailed me part 6a is too hard and I should split it in pieces, that's what I am going to do. This is the part 5.1, to be read after part 5.

Of course you should read parts 1 to 5 if you didn't already.

No walls and speed limit

Well, until now we have always seen the stage perimeter limited by walls. What if there are no walls?
Without walls, when the player exits to the top, he should appear from the bottom, if he exits to the right he should appar from the left, and so on.

You can imagine that if you leave the player in a "free fall" or move him in the same direction for a long time, he may gain a lot of speed, making the game unplayable.

So we have to limit the speed if we want to remove walls.

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = 0;
  3.     xspeed = 0;
  4.     wind = 0.00;
  5.     power = 0.65;
  6.     gravity = 0.1;
  7.     upconstant = 0.75;
  8.     friction = 0.99;
  9. }
  10. onClipEvent (enterFrame) {
  11.     if (Key.isDown(Key.LEFT)) {
  12.         xspeed = xspeed-power;
  13.     }
  14.     if (Key.isDown(Key.RIGHT)) {
  15.         xspeed = xspeed+power;
  16.     }
  17.     if (Key.isDown(Key.UP)) {
  18.         yspeed = yspeed-power*upconstant;
  19.     }
  20.     if (Key.isDown(Key.DOWN)) {
  21.         yspeed = yspeed+power*upconstant;
  22.     }
  23.     xspeed = (xspeed+wind)*friction;
  24.     yspeed = yspeed+gravity;
  25.     if (xspeed>15) {
  26.         xspeed = 15;
  27.     }
  28.     if (xspeed<-15) {
  29.         xspeed = -15;
  30.     }
  31.     if (yspeed>15) {
  32.         yspeed = 15;
  33.     }
  34.     if (yspeed<-15) {
  35.         yspeed = -15;
  36.     }
  37.     _y = _y+yspeed;
  38.     _x = _x+xspeed;
  39.     if (_x<0) {
  40.         _x += 500;
  41.     }
  42.     if (_y<0) {
  43.         _y += 350;
  44.     }
  45.     if (_y>350) {
  46.         _y -= 350;
  47.     }
  48.     if (_x>500) {
  49.         _x -= 500;
  50.     }
  51.     _rotation = _rotation+xspeed;
  52. }

Lines 25-36: Controlling that xspeed and yspeed range between -15 and 15

Lines 39-50: Controlling when the hero exits from the stage (in this case the values are equal to movie size, but they may differ if you plan to put a score bar or something else).

Invulnerability

Sometimes we do not want the player to die twice (or more) in a couple of seconds... it would be too frustrating... the solution is to grant a limited time when the player is invulnerable after his death.

We need a flag that determines invulnerability. I decided to use the _alpha because I want to show the player transparent when it is invulnerable, but of course you can use a variable of your choice.

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = 0;
  3.     xspeed = 0;
  4.     wind = 0.00;
  5.     power = 0.65;
  6.     gravity = 0.1;
  7.     upconstant = 0.75;
  8.     friction = 0.99;
  9. }
  10. onClipEvent (enterFrame) {
  11.     if (Key.isDown(Key.LEFT)) {
  12.         xspeed = xspeed-power;
  13.     }
  14.     if (Key.isDown(Key.RIGHT)) {
  15.         xspeed = xspeed+power;
  16.     }
  17.     if (Key.isDown(Key.UP)) {
  18.         yspeed = yspeed-power*upconstant;
  19.     }
  20.     if (Key.isDown(Key.DOWN)) {
  21.         yspeed = yspeed+power*upconstant;
  22.     }
  23.     xspeed = (xspeed+wind)*friction;
  24.     yspeed = yspeed+gravity;
  25.     if (xspeed>15) {
  26.         xspeed = 15;
  27.     }
  28.     if (xspeed<-15) {
  29.         xspeed = -15;
  30.     }
  31.     if (yspeed>15) {
  32.         yspeed = 15;
  33.     }
  34.     if (yspeed<-15) {
  35.         yspeed = -15;
  36.     }
  37.     _y = _y+yspeed;
  38.     _x = _x+xspeed;
  39.     if (_x<0) {
  40.         _x += 500;
  41.     }
  42.     if (_y<0) {
  43.         _y += 350;
  44.     }
  45.     if (_y>350) {
  46.         _y -= 350;
  47.     }
  48.     if (_x>500) {
  49.         _x -= 500;
  50.     }
  51.     _rotation = _rotation+xspeed;
  52.     if (_alpha<100) {
  53.         _alpha += 0.5;
  54.     }
  55.     if ((_root.wall.hitTest(_x, _y, true)) and (_alpha>=100)) {
  56.         xspeed = 0;
  57.         yspeed = 0;
  58.         _x = 30;
  59.         _y = 30;
  60.         _alpha = 10;
  61.     }
  62. }

Lines 52-54: if the _alpha is less than 100 (fully opaque), it increases the _alpha by 0.5

Ok, but when will alpha be less than 100?

Line 55-61: if the player hits the object instanced as wall and the player's _alpha is less than 100, he moves to his starting position and his x and y speed are set to 0. Moreover, his _alpha is set to 10.

So, when the game starts, the player as _alpha to 100. If the player hits the wall, he dies and his _alpha is set to 10.

Since the _alpha is less than 100, it's increased by 0.5... _alpha now is 10.5, then 11, 11.5 and so on until 100.

If the _alpha is still less than 100 (so the player died some seconds ago) ant the player hits the wall, he doesn't die because his alpha is still less than 100.

That's what I call "invulnerability"

now, a new feature not covered until now...

Scrolling

Let's imagine a laaarge stage. How can you explore it? Easy, with the scrolling.

How can we manage scrolling? It's easy, we just keep the player fixed in the center of the movie, and move the background.

In order not to making it too CPU expansive, I suggest you to draw the background in a 1/10 scale, then resize it once on the stage.

Look at the actionscript:

PLAIN TEXT
ACTIONSCRIPT:
  1. onClipEvent (load) {
  2.     yspeed = 0;
  3.     xspeed = 0;
  4.     wind = 0.00;
  5.     power = 0.65;
  6.     gravity = 0.1;
  7.     upconstant = 0.75;
  8.     friction = 0.99;
  9. }
  10. onClipEvent (enterFrame) {
  11.     if (Key.isDown(Key.LEFT)) {
  12.         xspeed = xspeed-power;
  13.     }
  14.     if (Key.isDown(Key.RIGHT)) {
  15.         xspeed = xspeed+power;
  16.     }
  17.     if (Key.isDown(Key.UP)) {
  18.         yspeed = yspeed-power*upconstant;
  19.     }
  20.     if (Key.isDown(Key.DOWN)) {
  21.         yspeed = yspeed+power*upconstant;
  22.     }
  23.     xspeed = (xspeed+wind)*friction;
  24.     yspeed = yspeed+gravity;
  25.     _root.wall._y -=yspeed;
  26.     _root.wall._x -=xspeed;
  27.     _rotation = _rotation+xspeed;
  28.     if (_root.wall.hitTest(_x, _y, true)) {
  29.         xspeed = 0;
  30.         yspeed = 0;
  31.         _root.wall._x = 2500;
  32.         _root.wall._y = 1681;
  33.     }
  34. }

The only difference is on lines 25 and 26: the player does not moves, the wall does it!! When in previous examples the player moved to the left, now we move the wall to the right, when the player moved down, we now move the wall up, and so on.

When the player hits the wall (line 28) we do not reset hero's position but wall position (lines 31-32).

Can you run through all the tunnel?

I hope scrolling opened you mind about some new game concepts.

Download the full examples, give me feedback and remember to send me your games, if made starting from one of my tutorials.

Then, continue wit part 5.2

Links of Interest: casino game

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5 out of 5)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

51 Responses to “Flash game creation tutorial - part 5.1”

  1. Pamela on February 10th, 2007 1:38 am

    Wow! I was getting a bit bored until i reached the end of this tutorial with the tunnel. I am definatly going to use this

  2. abhilash on February 10th, 2007 7:23 am

    Coooool!!
    scrolling walls were fantastic!!
    I’ll be submitting my new software that’s like paint in a few days when it will be ready with loads of colors to choose.

  3. Grifo on February 10th, 2007 9:03 pm

    Indeed, but if you have a more complex game, with a hole scenario behind the characters, it turns to get “too CPU expensive” if you use that kind of coding. I wonder, do you know any other way to do scrolling in this case?

    Thanks.

    By the way, your tutorials are very good.

  4. mousey on February 11th, 2007 11:34 am

    1 word, AWSOME !

  5. mousey on February 11th, 2007 11:34 am

    1 word, AWSOME !

  6. Alex on February 11th, 2007 7:42 pm

    You should make a tutorial about how to make a power bar, such as for golf

  7. exo81 on February 14th, 2007 2:44 pm

    Nice work! That’s pretty interesting. Thanks for letting us know how to create a game like that!

    Thumbs up (!)

  8. george on February 14th, 2007 3:13 pm

    i love the game so i was inspired to do 1 myself. just a question is there anyway to make it so that when you reach the end you goto another frame that could say something like well done?

  9. hasna on February 14th, 2007 5:18 pm

    @george: thats isnt hard you make the “goal” (make the instance name “goal”) as an own movie clip and this text in your “onClipEvent” on the “ball” “if (_root.goal.hitTest(_x, _y, true)) {gotoAndStop(the_frame)}”.

    I think that should work :D.

  10. george on February 15th, 2007 8:01 pm

    @hasna it doesn’t work i’m afraid. it seems to think that the exit is the wall so it resets itself. is there any way to get around this?

  11. This rules on February 16th, 2007 1:39 pm

    Hi.

    I download an example for any page off this.
    I open it, and it always says “Unexpected File Format”

    Why does this happen and how to i solve it?

  12. This rules on February 16th, 2007 1:43 pm

    Man this site rocks!!
    Some pro Emanuele is!

  13. hansa on February 17th, 2007 2:10 pm

    @george: i think this should work http://flashmx.zoomshare.com/files/tunel_with_exit.fla

  14. george on February 17th, 2007 8:54 pm

    @ Hasna It finnaly works thankyou very much!!!!

  15. Jake on February 18th, 2007 1:11 am

    Awesome tutorial! I’ve got one question though. I made one, and donwlaoded your sorce to compare and on mine, when you hit a wall. It starts you back in a white place with nothing around it. Anyone help?

  16. ryan on February 18th, 2007 6:15 pm

    hey when i try to make one when you hit the wall in the scrolling bit the wall tunnel thing disapears

  17. george on February 18th, 2007 9:00 pm

    if you look at the actioscript it says
    _root.wall._x = 2500;
    _root.wall._y = 1681;
    change the number to where your wall is(look under properties of the wall for the x and y

  18. Director on February 20th, 2007 8:04 pm

    Very nice and easy to follow tutorial,. keep um coming =)

  19. marco on February 22nd, 2007 2:17 am

    ciao, fighissimo il tuo sito!!!
    lo sto visitando per caso e sono rimasto folgorato .
    sono alla ricerca di un tutorial per creare una cosa in flash…ma non riesco a trovare nulla che mi aiuti vorrei fare una cosa del genere
    http://www.nymphusa.com/kisekae/tele650/base.asp
    ma non so da dove iniziare visto che sono un novellino:-(
    chiedo a te che sei esperto, esiste un tutorial da qualche parte che mi possa almeno indirizzare per iniziare?
    ciao

  20. ummm on February 22nd, 2007 5:42 am

    nice finishing

  21. Anonomas on February 22nd, 2007 8:11 am

    I got through!

  22. AgentMoses on February 24th, 2007 10:06 pm

    First of all, I’d love to thank you so much for this tutorial. I’ve dabbled in Flash for years, but with your help I can finally realize my goal of intertwining my artistic ability with elements of gameplay. Indeed, without your expertise, I could not even begin the project I have now undertaken. Please, check my DeviantArt (it should be up there, but it’s agentmoses.deviantart.com) and try it out. I’m not done yet, but it should give you an idea of what I’m working with. It’s called -gravity-, and, without you, it would never exist.

    Thanks, man.

  23. Kieron on March 12th, 2007 10:41 pm

    First of all, I would like to thank you for all of the time, work and effort you will have put into making these tutorials. They are greatly appreciated by many, including me. I am using this series of tutorials as ‘reference’ for creating my own game of a similar style. They are greatly useful.

    However, I have discovered a major glitch. If you try to apply the invulnerability code to a game enclosed by walls (such as mine), while you are invincible, you can actually just drift out of the walls. And if this happens and you then become vulnerable again, the only way back into the game is to lose points, or a life.

    I have devised the following code to help those with the same problem: -

    if (_alpha=100)) {
    xspeed = 0;
    yspeed = 0;
    _x = 30;
    _y = 30;
    _alpha = 10;
    _root.lives–;
    }

    As you can see, I am using lives as a decreasing variable when you are vulnerable, but while you are invulnerable, you simply are ‘reseted’. I hope this helps those that are trying to apply this code to an enclosed game.

    ~ Kieron

  24. Kieron on March 12th, 2007 10:41 pm

    I apologise for the above code, but it seems not to have worked…

  25. hey on March 12th, 2007 10:59 pm

    can any1 help me make a flash game that is easy and short ?

  26. i need help on March 15th, 2007 5:24 pm

    i cant make the wall help me plz people..

  27. sam on March 22nd, 2007 11:22 pm

    that took forever to get to end

  28. abcd728 on March 27th, 2007 3:31 pm

    This is so awesome!!! it took my atleast 50 lines of code just to get a rotating background!!! this really helps!!! TYTYTYTYTY!!!

  29. CGShelf on April 6th, 2007 10:34 am

    Nice tutorial

  30. help on August 1st, 2007 12:26 am

    How do you change the tint or brightness with actionscript. I want to do the invulnerability idea, but instead change the tint or brightness of the hero. The reason I want to do this is because I want the hero when he its a section I have named fire to turn red. When he turns completly red he will respawn. Please help me.

  31. rob on September 14th, 2007 5:59 am

    wow i love all of your tutorials, the actionscript works and you have an example after every modification…

    great tutorials, keep makin them!

  32. Shadow Scythe on November 5th, 2007 6:31 am

    Hey, thanks for pointing me to the hitTest code. I think it may have just saved me a lot of work on a game I was planning to make.

  33. Riccardo on November 16th, 2007 9:12 pm

    HI! First of all: Very nice tutorial! Useful and easy to follow.

    I didn’t understand one thing though. in the previous pages you told us that collision are related to rectangulare bounding boxes around objects. But how does it work in this case?

  34. spartan 117 on December 2nd, 2007 12:38 pm

    i agree with shadow scyth

  35. Fahed on January 14th, 2008 6:24 am

    Hiya, well, I had a single question.
    As it is seen in some 2D side scroll games, when you reach the end of an extended maze or scene, usually the character stops being the center so to avoid getting off the limits of the scenario. That way, it starts acting as usual in a fixed background. Can it be done or it is complicated enough as to make me change my mind and making a longer background so it doesn’t look strange?

  36. ööö on February 8th, 2008 7:08 pm

    Jumping=false;//disable jumping since we have returned to ground

  37. james on March 12th, 2008 7:57 pm

    I am trying to mix the side scrolling script with
    the platformer script and failing, will you post
    somthing to help?

  38. anthony on March 16th, 2008 6:00 pm

    okay so i plan on making the last game but for the super long walls how would i make them is it a super large image or just many loading into eachother? can u show me how to make the image?

  39. anthony on March 16th, 2008 6:05 pm

    ok so riccardo he earlier said that you can make it so the center can hit, the square can hit or the circle can hit. in the coding he wrote it so that it would reset when the middle of the circle hit the wall. if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    you could also make it so as soon as the cirle collides it resets with (this.hero_hit) but it would be very frustrating as the player, i like what he did with it

  40. Nsun on April 14th, 2008 11:04 am

    Thanks, this is a great tutorial. I am a student and trying to create a flash game for my project. It really helped me alot. some questions, my version of the game will only be horizontal and my character will jump to avoid hitting objects, but not actuall die but will the character will stop and turn alpha until alpha=100 then the character will resume and when the wall finish the game will end and the score is actually the time it took the character to finish the game.
    To create my own wall, how do I do it? do I make a series of obsticles as png? How do I program the wall to pause when alpha is <=100 ?

    Please give me some pointers.
    Thank you very much.

  41. OP on May 10th, 2008 11:17 am

    “Can you run through all the tunnel?”

    yes;) “goal!”:)))

  42. koko on August 10th, 2008 5:35 am

    Am i allowed to use ur examples and edit it to make my game?

  43. Emanuele Feronato on August 10th, 2008 10:34 am

    Sure koko!

  44. Goggles on August 18th, 2008 4:10 pm

    This might be a litle silly, but what program would i use to put all the code into and make a flash game of my own??? HELP ME!

  45. Tomas on October 5th, 2008 2:34 pm

    Hi there,

    I’m trying to make something like your game with the tunnel. I draw some lines etc. and convert them to a movieclip to be the walls. But my problem is that my player movieclip always hits the wall, I think because flash uses the whole movieclip of my walls to detect the collision?
    Please tell me how I can avoid this.

    Tomas

Leave a Reply




Trackbacks

  1. Flash game creation tutorial - part 1 at Emanuele Feronato on February 9th, 2007 6:57 pm

    [...] February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. December 6th update: 3rd part released. November 18th update: 2nd part released. [...]

  2. Flash game creation tutorial - part 5 at Emanuele Feronato on February 9th, 2007 6:58 pm

    [...] February 9th update: part 5.1 released. [...]

  3. Flash game creation tutorial - part 3 at Emanuele Feronato on February 9th, 2007 6:59 pm

    [...] February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. [...]

  4. Flash game creation tutorial - part 2 at Emanuele Feronato on February 9th, 2007 6:59 pm

    [...] February 9th update: part 5.1 released. December 31st update: 5th part released. December 23rd update: 4th part released. December 6th update: 3rd part released. [...]

  5. Flash game creation tutorial - part 5.2 at Emanuele Feronato on March 3rd, 2007 3:25 pm

    [...] In tutorials 1 to 5.1, I always include the ball actionscript in the ball object. This is correct, but it might create confusion when you have to deal with a lot of objects. [...]

  6. Flash game creation tutorial - part 4 at Emanuele Feronato on March 14th, 2007 12:57 pm

    [...] March 14th update: part 5.3 released. March 3rd update: part 5.2 released. February 9th update: part 5.1 released. December 31st update: 5th part released. [...]