Flash game creation tutorial – part 5.1

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.

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.

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:

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

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

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

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

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

  • 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

  • abhilash

    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.

  • Grifo

    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.

  • mousey

    1 word, AWSOME !

  • mousey

    1 word, AWSOME !

  • Alex

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

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

    Thumbs up (!)

  • george

    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?

  • hasna

    @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.

  • george

    @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?

  • 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?

  • Man this site rocks!!
    Some pro Emanuele is!

  • hansa
  • george

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

  • 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?

  • ryan

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

  • george

    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

  • Director

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

  • marco

    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

  • nice finishing

  • Anonomas

    I got through!

  • 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.

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

  • Kieron

    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

  • Kieron

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

  • hey

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

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

  • i cant make the wall help me plz people..

  • sam

    that took forever to get to end

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

  • Nice tutorial

  • help

    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.

  • rob

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

    great tutorials, keep makin them!

  • 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.

  • Riccardo

    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?

  • spartan 117

    i agree with shadow scyth

  • 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?

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

  • james

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

  • 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?

  • 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

  • Nsun

    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.

  • OP

    “Can you run through all the tunnel?”

    yes;) “goal!”:)))

  • koko

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

  • Emanuele Feronato

    Sure koko!

  • Goggles

    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!

  • Tomas

    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

  • wobalisk

    I don’t understand how you make the hitTest() only return true when not on the wall, isn’t the entire thing the same wall and so the tunnels should be part of it too?

  • wobalisk

    ok I have my first on sorted out (see last post), however I have been trying to add some of your techniques together and have managed a scrolling, death counting with invulnerability game and can add moving blocks.

    The problem I am having is that I want multiple moving blocks at once without having to add a line in the player code saying :

    MovingBlock1._x -= xspeed;
    MovingBlock2._x -= xspeed;
    etc…

    Is there anyway to move an entire layer with all the objects that should move relative to the player in it or something?

  • e200

    I tried to change one line of code as follows:
    if (_root.wall.hitTest(this.hero_hit)) {

    then it stopped working. Anyone has any ideas why?

  • John Mooring

    @wobalisk: yes.

    Nice tutorial, but I notice you move the terrain. This makes having multiple “stationary” objects on screen at a time very difficult. Unless you always keep them orientated with the terrain, you will have problems. And if you need them to move, you will encounter even more problems. Solve this by moving the _root. Because the root is moving, you will also need to move the character in the opposite direction; this solves the multiple object problem, and, depending on the complexity of the map, can save you many lines of code.

    Replace

    _root.wall._y -=yspeed;
    _root.wall._x -=xspeed;

    With

    _root._x-=xspeed;
    _root._y-=yspeed;
    _x+=xspeed;
    _y+=yspeed;

    Two extra lines of code here saves you dozens elsewhere.

  • John Mooring

    You have two options with hitTests. Bounding box vs. bounding box, or pixel vs. actual shape. In the tutorial, he was testing a single point on the player against the terrain. You’re testing a box drawn around the player vs. a box drawn around the terrain. The player is inside the terrain. You’re dead as soon as you enter the frame.

  • cameron

    argh this is frustrating me and a few others are making a game and we need the screen to move in sed of the character and it is givinge me all types of hell i evan used the part of the action script that makes the scrren move plz
    HeLP
    ME

  • chris

    cant i just have the camera on the ball ? or is there a way?

  • saul

    hi i was wondering if it is possible to add enemies and possibly shooting in the scrolling game like the one in the tutorial. I have been trying to
    add these things but do not seem to work or show up. any help would be appreciated

  • Okay, I am making a racing game, and I need to know how to make sure that the car doesn’t go too fast. I’ve put in this code:

    if (_root.yspeed>10){
    _root.yspeed = 10;

    As you can see, I tried to copy the score thingy.
    Also, what is Emanuele’s email!?!?!?!?!?!?!?!

    HELP ME

  • BTW, for anyone that is trying to help me (the guy with the problem of making the speed a minimum,

    EMAIL ME AT LEGOBANG@GMAIL.COM

  • Ike

    Hey, Emanuele (or anyone with flash game experience)!
    In your example, the character is fixed in the center of the screen, but I would like him to be in the down left corner of the screen (it’s a platform game). What do I do in this case?

    Thanks in advance

  • DJ

    hey im using your tutorial for my class how do you make an exit on the tunnel level that doesnt move? i have everything else working! please help

  • karim

    you said:
    I hope scrolling opened you mind about some new game concepts.
    I say
    You open my eyes eo a new world.
    thank you very much.

  • ARGH! This “travel through the tunnel” game is frustrating.

  • joao capinha

    this is fantastic!

    cangratulations.. and thank you for this tutorials

  • Apoorv

    You are a genius!!!!!!

  • I’m trying to create a new version of the scrolling and its not working. Can you tell me what you used to draw your background? I want to make a game like a helicopter scolling and I’ve already got the physics down now I just need the scrolling. an example is this http://www.addictinggames.com/helicopter.html
    Can anyone help me I just need to make the scrolling.

  • andy

    Don’t frustrate your players too much!
    Hence, for creative folks here, an IDEA for improving the tunnel game:

    Create CHECKPOINTS!
    Er…what?

    Well, imagine your true self to have completed 95% of the game, and you DO crash against a wall! Yes, you will have to start over from the beginning.
    But, as the tunnel system is very long and ample, there should be some “checkpoints” Even in old home computer games these existed, and they made player’s life much easier!
    Don’t put too much of them, but maybe 2 to 5.

    The result is, if you have passed that checkpoint, and you DO crash against a wall, the game will resume from that last checkpoint.
    Should not be too difficult to do. Take it as an exercise :)

  • Awesome work ,Thanks for sharing it really helped us how to make games,

  • John

    How can I make a scroller for two players? How can I make player1 see player2 where he has to be, and vice-versa?
    Please help!

    Sorry for the spelling :(

  • Aarthi

    THANK YOU SOOO MUCH!!!! I’m a complete newbie, and your tutorials have helped out heaps! They are amazing. I love your explaination of the background scrolling, it’s a lot simplier and more effective than a lot of others on the internet :)