Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

Flash game creation tutorial – part 2

Emanuele Feronato Flash

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.
December 23rd update: 4th part released.
December 6th update: 3rd part released.

Welcome to the second step.

Read the 1st part and you’ll be ready to follow me with the game creation.

As you can see, now I can move the hero in a quite funny way.

Now, it’s time to introduce some (deadly) obstacles.

The bounds

Every game area has bounds, so I created a movieclip called “bounds” and instanced as “wall”.

My hero can’t touch any wall, so the actionscript will be:

What happened?
I added lines 28 to 33, let’s see how do they work.

Line 28: I perform a hit test between the hero and the movieclip called “wall”. The _x and _y means that I am checking the collision only on the _x and _y attributes of the hero – its center –
Why am I doing it this way? Because I think the game would be too frustrating if I should check the collision between any pixel of the hero and the game bounds. Moreover, the smallest the collision area (1 pixel in this case), the more complicate and creative the bounds you can draw to make the player move around it.
Lines 29 to 32 simply “reset” hero’s position in case of death.

The coin – 1st attempt

Now I want my hero to be able to collect coins or similar things, so I created a new movieclip named and instanced as “coin”.
New actionscript is:

Look at lines 34-36.
Line 34 performs basically the same test as I did for the bounds, line 35 simply moves the coin to another position once you collect it.
Wonderful.
Now try to collect the coin.

It looks hard and buggy, isn’t it?
That’s why I am performing the hit test only with the center of the hero, I mean only with one pixel.
While this method was good for the bounds, now it looks awful.

The coin – 2nd attempt

I am trying a different approach, changing line 34 with

I am extendid the hit test to the entire shape.
Try to collect the coin now…

Now it’s too easy!!
You can collect coins just staying close to them. Why?
Because Flash performs that hit test basing on a rectangular shape built around the hero’s shape.
Just imagine a bounding box. Everything you hit with the bounding box returns a true value.
While the 1st attempt looked hard and buggy, this one looks easy and buggy. Keyword: buggy.

The coin – 3rd attempt

Are you about to give up? No?
Well, I have the solution.
Just create a new movieclip called “hero_hit” and insert into the hero’s movieclip, at its center. That’s the small blue square you notice on the movie.
Now perform the hit test on the hero_hit movieclip instead of the hero itself.
You can obvioulsy change the hero_hit size according to the feeling you want to give to your game.
The smaller the size, the hardes to collect coins.
Final actionscript is:

As you can see, the hit test at line 34 checks collision between the coin movieclip and the hero_hit movieclip

And here ends the second part..

Download the source code for all examples and experiment.

Of course, leave me feedback.

Continue with the 3rd step

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 186

  1. Pingback: Flash game creation tutorial - part 1 at Emanuele Feronato

  2. Conor

    another problem:

    i pasted the code properly so that the ball can move, but instead of the ball simply going left and right while rotating the shape, the ball rotates round a point thats about 200 pixels away from it! i hope you understand that – it still moves left and right but swirls around and goes all out of control. Plus the gravity and speed don’t seem to be right because basically it’s very slow. by the way i am a beginner…

  3. Ben

    really cool
    But how would i edit the code so when it hits an object i want it to it goes to the next level (where i will put the next level)

  4. Post
    Author
  5. Anonymous WebDesigner-In-Training

    Wow. I read Part 1 and 2, and I really like this. I knew MOST of it, but for example, the square used to make the pathing better was a great idea that I would have never thought of. I never knew such a nice game like Ball Revamped could be made with such easy coding. Of course, this isn’t Ball Revamped yet. ;)
    Also, I’m surprised that there are still people in the world that are so caring as you are. I’m glad there are people around that out of their free will, decide to help others that they don’t even need to help. If you were to not write these tutorials, it wouldn’t affect you in anyway, but instead it effects people you don’t even know.

  6. Anonymous WebDesigner-In-Training

    But I have an issue. For some reason, even after I do all the things tutorials tell me to do, I can never get hitTests to work. Is there any way you can help me with it?

    I have a movieclip titled hero, and the instance of hero, and this is the actionscript on it.

    onClipEvent (load) {
    power = 3;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    _x -= power;
    }
    if (Key.isDown(Key.RIGHT)) {
    _x = power;
    }
    if (Key.isDown(Key.UP)) {
    _y -= power;
    }
    if (Key.isDown(Key.DOWN)) {
    _y = power;
    }
    if (ifthis.hitTest(_root.point)) {
    _root.score = 1;;
    }
    }

    Basically, as you can see, I want my dynamic text box with the instance of score to go up one point when my hero hits the point movie clip with the instance of point.
    The movieclips touch, but NOTHING HAPPENS. Every time I try to to a hitTest, I get the same problem.

    1. bob

      Also make sure of this:
      Click on your dynamic text.
      Go down to ‘variable’.
      Click in the box and type ‘points’ or what ever the variable is.

  7. Me

    Your code:
    if (ifthis.hitTest(_root.point)) {
    _root.score = 1;;
    }

    Correct code:
    if (this.hitTest(_root.point)) {
    _root.score = 1;
    }

    I think

  8. Post
    Author
    Emanuele Feronato

    I think
    if (this.hitTest(_root.point)) {
    _root.score = 1;
    }
    Anyway scoring system and whatsoever is going to be explained soon.

  9. Post
    Author
    Emanuele Feronato

    Bouncing requires a close-to-real physics engine, that won’t be covered in this game creation.

    Anyway, I am preparing some tuts on flash physics so come back soon.

  10. Anonymous WebDesigner-In-Training

    I have a question. I have a movie clip following my mouse, okay? And I have my actionscript set to where, when it hits another movie clip, my score goes up constantly. I’ve done a hittest that makes my score go up constantly before, but its not working this time. :( I always have problems with hittest actionscript. Do you think you could show me an example in coding that when you get a chance?

  11. Pingback: Flash game creation tutorial - part 3 at Emanuele Feronato

  12. No problemo, (yeah right!)

    I have some problems. Even though I type the script the right way, the wall thingy won’t work. I have even tried to just copy it, and it still doesn’t work.

    Can someone please help me??

  13. Ammar J.

    yeh, this is for No problemo, (yeah right!). same happened to meh, but its easier if u make a htin line ur boundy. just make a line fomrt he line tool…. select it, press F8, give it a name and then kepp the instance wall(or somehitng…this just an example). then on ur hero, type in this code:

    if(_root.wall.hitTest(this)){
    xspeed = 0;
    yspeed = 0;
    _y = 120;
    _x = 120;
    }

    and voila, theres ur boundery. notice how i changes the:

    (_x, _y, true)){

    to :

    (this)){

    ?
    typing, (this)){ will make the entire line or shape the bondery instead of just one pixel of it.

    p.s. thanks to this tutorial for giving me this info :P

  14. gamerz paradise

    Personally, I never use more than one life on this if I understand this correclty. I just wonder why so many do not understand how this is. I guess that is the beauty of it all. Good post though!!

  15. Anonymous Reader

    This is a great tutorial up to the point where you are supposed to create a wall. When I make my wall, I named it boundry. Ok, how do i use an instance or what ever you call it. When I drag the movie clip onto the screen, and play the game, it will not work… Why is this, care to share more details about the boundries? Thanks!

  16. Anonymous Reader

    Ahh, I figured it out, you go to property’s and type in a name in . Now, though, I seem to be haveing a problem getting the blue square to work. How do you insert one movie clip into another? When I do it, the blue box remains still whereas the Hero does like normal. Why do they not move together? Thanks for any help.

  17. Post
    Author
  18. Pingback: Flash game creation tutorial - part 4 at Emanuele Feronato

  19. Diamonddrake

    This tutorial is awsome, the look and feel of the movement you get out of most tutorials is sad, but with your step by step explaination, it shows you just how each element affects your character, so you can choose the effects you want. you have the makings for greatness. but comment questions that are being left to you, offend me. as a learning programmer, I take pride in the work that I do. and I spend hours carfully reading books, and online tutorials. When people constantly send you questions that are obvious typos and simple careless mistakes like forgetting to assign instance names, it wastes time of people with real questions. Not to mention the time of the people reading the tutorial thinking they can learn more from the comments, when in fact they are reading usless bable… not unlike this… of course, I am making a point. not being an idiot. you rock. thanks for this tutorial

    Rickey
    web master, diamonddrake web design

  20. Pingback: Flash game creation tutorial - part 5 at Emanuele Feronato

  21. yura

    Hey i have another question. When you make like wall boundries and coins do you paste you autoscript on to the coin for coin and wall for wall? or you continue doing the for the hero???

  22. Purple_Chikcen

    hey nice tutorial ive done part one and 2 it works perfectly but is there a way to make multiple movie clips with the same instance name do the same thing? like instead of putting this:

    if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }

    i put that 4 times like this:

    if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.wall2.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.wall3.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.wall4.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }

    is there a way to make the copies of a movie clip do the same thing without giving it a different instance name? cause i was doing my first ever game on flash and i made 150 enemies and only one worked so i had to frikin change the instance name of every one of them! lol can u help

  23. Matt

    Hey the hero is working fine but the HitTest on the wall is not happening. My heroMC just goes under it! Also, when I download the source code it says invalid file format. Im using Flash MX 2004 – is that a compatability problem? Thanks, MAt

  24. ivis

    Hey, in coin attemp 3, I dont ubderstand the “insert hero_mc into the middle of the hero”. Can you please tell me in full details. And when I pasted your script in coin attempt three,the hero just move seperatly with the hero_hit.

  25. Owen

    When I tried the code, I had a slow frame rate and I noticed that the ball doesn’t rotate at the right speed, you can’t simply say
    _rotation = xspeed; . This rotation glitch seems to be Conor’s problem as well. The ball is rotating at δ pixels/frame. The distance travelled is the length of the arc, which is r*α^c, where α is the angle subtended and ^c means its in radians. Since flash works in °, you must convert it to that. So, the distance travelled in 1 frame (δ) = 2Ï€r*(α°/360), .: α° = 180*δ/Ï€r, so, the rotation should be set to be equal to (180/Ï€r)*xspeed. r is equal to half of the height of the hero, so, the final code for the rotation is:
    _rotation = (180/3.14159*(0.5*_height))*xspeed; This fixed the glitch.

  26. Post
    Author
    Emanuele Feronato

    That’s amazing, I just wanted to make it rotate to simulate the speed, but you improved the whole thing a lot.

    Thank you.

  27. Mick

    hey, so far this tutorial has been really good, but when i move my character at the wall really fast he goes straight through it, but when he goes slow it works.
    Any one got any ideas?

  28. Mick

    ok, i worked out wat was going on, if i’m holding down an arrow key while i’m heading at a wall my hero goes through it, but if i head at a wall and let go of the key b4 i hit the wall, my hero goes back to the starting point. But i still dont nkow y its doing it.

  29. Dan M

    Thanks, Emanuele Feronato for publishing such thorough actionscript tutorials.

    Can anybody explain why my code is broken? It is entered into the action window for PLAYER_MC. PLAYER_MC and GROUND_MC are both on layer1 frame 1. PLAYER_MC has some simple movement controls. When PLAYER_MC crosses GROUND_MC, this hitTest doesn’t work.

    onClipEvent (enterFrame) {
    if (_root.GROUND_MC.hitTest(this)) {
    trace(“hitdetected”);
    }
    }

    I have also tried writing it as
    if (this.hitTest(_root.GROUND_MC)){

    And I’ve tried it without “_root” No collisions are ever detected. Adding the following:

    trace (_root.GROUND_MC.hitTest(this))

    Returns nothing but “undefined”.

    Thanks for any help, I’m learning flash and starting to understand and enjoy it, but this is really stumping me.

  30. Anonymous

    I really like your tutorial but I don’t like how you explain.
    Example:
    “Just create a new movieclip called “hero_hit” and insert into the hero’s movieclip,”
    How do I insert it into the hero’s movieclip??

  31. glucozade

    hey i’ve done up till the end of this tut. and my script is as below (the ‘hero’ is Sonic and the ‘coin’ is a ring and thw ‘wall’ are spikes, i’ve also taken rotation out.)

    onClipEvent (load) {
    yspeed = 0;
    xspeed = 0;
    wind = 0.00;
    power = 0.65;
    gravity = 0.1;
    upconstant = 0.75;
    friction = 0.99;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    xspeed = xspeed-power;
    }
    if (Key.isDown(Key.RIGHT)) {
    xspeed = xspeed power;
    }
    if (Key.isDown(Key.UP)) {
    yspeed = yspeed-power*upconstant;
    }
    if (Key.isDown(Key.DOWN)) {
    yspeed = yspeed power*upconstant;
    }
    xspeed = (xspeed wind)*friction;
    yspeed = yspeed gravity;
    _y = _y yspeed;
    _x = _x xspeed;
    if (_root.spikes.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.ring.hitTest(this.sonic_hit)) {
    _root.ring._x = Math.random()*400 50;
    }
    }

    it works ok when i try it,but is there anything ive missed?

  32. glucozade

    PS

    No Problemo hve you given your movieclips an instance name each? and are they the same in the script?

    ie, in my script above, i’ve given my ‘coin’ an instance name as ‘ring’ and replace the ‘coin’ in the script with ‘ring’

  33. Ryke

    This tutorial is the best of the bestbut i was wandering why Whenever i add the rotation it always goes up before going sideways. why is that

  34. Mike

    Ryke,

    double-click on the movieclip of your ball and you see that it brings you to an edit screen for that clip? Make sure the little crosshair is at the center of your ball. Once you do that you can double click anywhere on the frame and it should bring you back to your main screen. Test your movie out and let me know if that helps any.

    Mike

  35. Mike

    Purple Chicken made a post in January that wasn’t answered by anyone. If anyone knows how please tell cus I have the same question. He said:

    “hey nice tutorial ive done part one and 2 it works perfectly but is there a way to make multiple movie clips with the same instance name do the same thing? like instead of putting this:

    if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }

    i put that 4 times like this:

    if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.wall2.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.wall3.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    if (_root.wall4.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }

    is there a way to make the copies of a movie clip do the same thing without giving it a different instance name? cause i was doing my first ever game on flash and i made 150 enemies and only one worked so i had to frikin change the instance name of every one of them! lol can u help”

    //any ideas anyone? It would be appreciated =)
    //Thanks,
    //Mike

  36. Mike

    Daniel,

    Try doing this to rotate your ship.

    if (Key.isDown(Key.LEFT)) {
    _rotation -= 5;
    }
    if (Key.isDown(Key.RIGHT)) {
    _rotation = 5;
    }

    I find 5 to be a nice speed to rotate at as it isn’t too fast or too slow. The up and down thrust movement you are asking about is mentioned in every one of these tutorials so I figure you know how to do that already.

  37. ronald

    stil a nice tutorial,
    i got stuck with the collision because i rreally have no idee what movieclips and everything is but i now i have it almost perfect,
    only my sprite inst perfectly round so it moves weird,
    think i start on the next now

  38. Zeozen

    Zomg, damn good tutorial! Only one question… I created a movie clip called hero_hit, and instanced it as the same. But how do I get the hero_hit movie clip to move with the hero instead of just staying at one place and looking retarded.. please answer me anyone:D

  39. Ryke

    I cant seem to get the wall to work. Well acually i dont get the wall at all. but i must say so far this is the best tutorial ive seen.

  40. Ryke

    Oh never mind I got it now I forgot to read the part about making the movie clip and instance name. although i still cant get the ball to spin straight it always goes up and then down if i add the rotation,but only when i turn left or right, once rotation is off it stops

  41. Trevor

    I don’t get the wall bit, I have added a movie clip surrounding the ball and named it wall but it still goes straight through! any ideas of what it might be?
    P.S. great guide thx a lot!

  42. CDC7

    I am creting a flash game and i was wondering if you could help me with the code for it. It is a maze where the cursor has to stay inside a line, when it reaches the end there is a button to press and it moves to the next scene. This tutorial was so helpful I thought I would ask about this.

  43. newbie...

    i just started practicing flash yesterday i can make the ball move and turn (rotate) but it cant make it so the walls make it disappear (or die) i tried it even by starting over but… my ball just goes through the walls… anyone here to fix my mistake? this is the action code i put in

    onClipEvent (load) {
    yspeed = 0;
    xspeed = 0;
    wind = 0.00;
    power = 0.65;
    gravity = 0.1;
    upconstant = 0.75;
    friction = 0.99;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    xspeed = xspeed-power;
    }
    if (Key.isDown(Key.RIGHT)) {
    xspeed = xspeed power;
    }
    if (Key.isDown(Key.UP)) {
    yspeed = yspeed-power*upconstant;
    }
    if (Key.isDown(Key.DOWN)) {
    yspeed = yspeed power*upconstant;
    }
    xspeed = (xspeed wind)*friction;
    yspeed = yspeed gravity;
    _y = _y yspeed;
    _x = _x xspeed;
    _rotation = _rotation xspeed;
    if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    }

    ……………………………………………………
    an heres how the things were placed

    key:
    boundoury= …
    ball= *

    ……………………………………..
    . .
    . .
    . .
    . * .
    . *** .
    . * .
    . .
    . .
    . .
    . .
    ……………………………………..

    help would be greatly appreciated

  44. Flash beginer

    I was wondering how you put the hero_hit and the hero into 1 movieclip?
    I couldnt open the source code files either. So Could someone PLEASE help me?

  45. joey

    really good tutorial, helped me loads !! i have a crap understanding of actionscript but i still found this easy to follow.
    cheers.

  46. bluemilk

    People asking about the hitArea part. Doubleclick on your ball movie clip and it will go into the movie clip where your ball is just a shape not a movie clip. In the movieclip create a new layer underneath or (above if you want to see it) your ball. In this layer create your hitArea square and convert it to a movie clip. Give it an instance name of hero_hit. Great tutorial.

  47. Guy-Who-Really-Needs*HELP*

    i didnt get the bounds part, do i create a new symbol called bounds?
    i did that and put it in different layer and pasted the code nd when i check it out the entire thing moves so if i press left the bounds(which i drew) move left with the ball inside?weird huh.

  48. Helpless

    Uh ok, I really need help with my wall! I can get it to work sometimes, but its almost like if Im going fast enough it will just tress pass through it.

  49. Pingback: A strange way to move the player with Flash at Emanuele Feronato

  50. Piggy

    AWSOME TUTORIAL!!!!!!!!!!!!!!!
    and the comments were really helpful with the hero hit thingy. couldn’t have finished without it
    THANKS!!

  51. Phobia

    Great tutorial, love it! I had one problem with the walls, but thanks to abhilash’s comment, I was able to fix it.

  52. tom

    i need help with hit checking. i want to get the wall to reset the ball as soon as it hits the edge not justhe center pixel but i can’t get it to work. i have tried using the thing done on the coin with the hero_hit but i can’t get that same method to work with the boundries.

  53. Michael?!

    hey guys, im new to flash games so this is a great tutorial, thanks!

    Also, my wall moves with my hero, how do i stop that?

  54. Pingback: Rodrigo Flausino » Dicas de tutoriais e sites para criação de jogos em Flash

  55. David Azar

    hi nice tutorial

    i have some little problems

    when i copy/paste the srcipt op gettingf the coin, it doesent work.

    when i play the game, the hero juust pass under the coin.
    it doesent dissapear but its imposible to me to get the coin please help me.

    ps. i dont have a web page, just needed to write a flase one to write this

  56. In need of help

    When i was trying to create the walls mine ended up very glitchy so i downloaded your source file. When i looked at your wall movie clip i noticed that the blue box that surrounds movie clips was in the center of the wall. How did you do this?

  57. Moomoo

    My friend told me about your tutorials and i love them. I was wondering if i could use some of your script to create an original game of mine. I’ll say I used your tutorials to help me make it.

  58. Post
    Author
  59. Pingback: A Gem of Flash Game Tutorials | Newbie Game Programmers

  60. Lemony

    Hi, I am making a retro game, and i dont want my delta to move in the way your hero did, so I skipped out the steps that made it all swurly, then I added the coins in without the code that makes it go swurly, but my charictar is not collecting the coins, just passing strait through them.

  61. Rhys

    Hi
    Excellent Tutorial.
    I understand all of it aprt from the coin thing. In try to do it and when i do it says:
    Scene=Scene 1, Layer=Layer 1, Frame=1: Line 1: Clip events are permitted only for movie clip instances
    onClipEvent (load) {

    Scene=Scene 1, Layer=Layer 1, Frame=1: Line 10: Clip events are permitted only for movie clip instances
    onClipEvent (enterFrame) {

    Please help
    and also wat program do u use?

  62. Rhys

    To lemony that is what happened to mine.
    Try this code in your main charcter:
    if(_root.coin.hitTest(_root.player)){
    { _root.coin._x = Math.random()*400+10; { _root.coin._y= Math.random()*400 + 10 } }
    }
    }

    also make sure that the coin is an MC and hasnt got any coding in it!!

  63. Rhys

    To flaming
    to fix your wall problem what i did
    was create 4 walls around my
    lines (or wateva u call them!) and then put this code in each of them: Left = onClipEvent (enterFrame) {
    if (this.hitTest(_root.player)) {
    _root.player._x +=15;
    }
    }

    Right = onClipEvent (enterFrame) {
    if (this.hitTest(_root.player)) {
    _root.player._x -=15;
    }
    }

    Up = onClipEvent (enterFrame) {
    if (this.hitTest(_root.player)) {
    _root.player._y +=15;
    }
    }

    Bottom = onClipEvent (enterFrame) {
    if (this.hitTest(_root.player)) {
    _root.player._x -=15;
    }
    }

    View the tutorials or http://www.rasclerhys.com/Tutorials.php
    Thanks!

  64. anthony

    so i went to do this and wrote out all of the code and it comes with an error saying it needs to be a movie clip how do i make it one. could u put a link to show me this? im a bit new to flash

  65. The_erik

    so.. i too have this problem with the hitTest thing.
    My character just passes through the wall no matter what i do :S
    i named my character “hero”.
    i named the wall “wall”.
    i’ve tryed doing Rhys’s trick aswell, help :<

  66. The_erik

    allright, i’ve figured it out (needed to instance the boundary >.< )

    but my Flash is still awfully laggy, while the flash i see here works perfectly.

    ? :(

  67. Tommy

    Okay,

    “The bounds

    Every game area has bounds, so I created a movieclip called “bounds” and instanced as “wall”.

    My hero can’t touch any wall, so the actionscript will be:

    PLAIN TEXT
    ACTIONSCRIPT:
    onClipEvent (load) {
    yspeed = 0;
    xspeed = 0;
    wind = 0.00;
    power = 0.65;
    gravity = 0.1;
    upconstant = 0.75;
    friction = 0.99;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    xspeed = xspeed-power;
    }
    if (Key.isDown(Key.RIGHT)) {
    xspeed = xspeed+power;
    }
    if (Key.isDown(Key.UP)) {
    yspeed = yspeed-power*upconstant;
    }
    if (Key.isDown(Key.DOWN)) {
    yspeed = yspeed+power*upconstant;
    }
    xspeed = (xspeed+wind)*friction;
    yspeed = yspeed+gravity;
    _y = _y+yspeed;
    _x = _x+xspeed;
    _rotation = _rotation+xspeed;
    if (_root.wall.hitTest(_x, _y, true)) {
    xspeed = 0;
    yspeed = 0;
    _x = 120;
    _y = 120;
    }
    }

    That doesn’t work for me.. My player just goes through the walls.

  68. Important Question

    What do I do if I don’t want to kill the character, but just stop them from leaving a defined area?

  69. Important Question

    Try:
    “if (_root.movieclip.hitTest(this)){“…
    with “movieclip” as the name of the object that the movieclip you add this hitTest to will react to.

  70. Richard

    Hit test trange behaviour?

    I created the walls as a movie clip and called the instance of the movie clip on my stage walls.

    Now, the first if statement works the second doesn’t. The hero (red ball) doesn’t even more. Any idea why?

    1) if (_root.walls.hitTest(this._x, this._y, true)) { ….

    2) if (_root.walls.hitTest(_root.hero)) { ….

  71. Roger

    HI.

    First I want to say that the tutorial is very good, and that I have learned a lot of it. But it was really hard to understand some changes you made on the code from the first to the second part. Things that are the same but make confusing for some of us that are starting on this. like: On the first you used something like _y += yspeed; and then U change it to _y = _y + yspeed; now I know it is the same.

  72. john smith

    you would put the next level on a different level and you would have to make the object a button then make the action script:
    on (rollover){
    gotoAndPlay (2)}

  73. joe

    hey this tutorial is so f-ing awesome omg.i really want to try it but… i dont know where to download flash. i want to make a cool game like this mmo called dofus it’s made with flash and it awesome but everything is for mem’s i want to make a game like that but no mem crap where it’s all like pay pay pay so tell me where to buy or download the flash game creation thing

  74. Stetlo

    You just put a stop actionscript on the frame your at an then make a new frame and stop it. theres 2 levels

  75. SumYungGai

    This is sort of irritating me. =/

    When I make a symbol and give it an instance name “wall” -I’m not confusing this with the symbols’ name- my program -Adobe Flash CS3- only considers the first “wall” symbol I made. All other symbols with the instance name “wall” are not accounted for and don’t carry on the appropriate actions regaurding the actionscript.

    E.G. A black square -symbol name “thing”- and-instance name “wall”- at the bottom of my screen kills my guy appropriatley. But when I try to put more symbol “thing”s into the field and give them instance name of “wall” my guy passes through them. The bottom wall still works but the others dont.

    Know what I’m doing wrong?

  76. SumYungGai

    I worked around it by giving the walls action names of “wall1″, wall2″, wall3″, and “wall4″ and it works, but I have to write actionscript for all 4 walls. Not to mention is clogs my script box and makes it more difficult to find bugs, certain portions of action script that need rewritten, ect…

  77. Connor

    I have a problem. I added hero_hit to the hero movie clip, and I added the actionscript to the new-and-improved hero movie clip after I put hero_hit in (I went back to the “scene 1″ area, not inside the hero movie clip), and when I move over the coin movie in the test movie, the hero won’t “collect” the coin. I don’t really know what it is I should do.

  78. Adrian

    ok, i took the exact same code from your hitTest for the wall, and mine doesn’t work…….
    I am trying to make it will not fall (which i made it do) but do not want to make a separate hitTest for each piece of wall.

    onClipEvent (load) {
    xspeed = 0;
    yspeed = 0;
    uppower = 7;
    downpower = 5
    friction = .75;
    gravity = 5;
    upconstant = 5;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.UP)) {
    yspeed -= uppower+upconstant;
    }
    if (Key.isDown(Key.DOWN)) {
    yspeed += downpower;
    }
    if (Key.isDown(Key.LEFT)) {
    xspeed -= uppower;
    }
    if (Key.isDown(Key.RIGHT)) {
    xspeed += uppower;
    }
    _x += xspeed;
    _y += yspeed;
    xspeed *= friction;
    yspeed *= friction;
    yspeed += gravity;
    if (_root.wall.hitTest(_x, _y, true)) {
    yspeed = 0;
    downpower = 0;
    } else {
    downpower = 5;
    gravity = 5;
    }
    }

    this is the part that doesn’t work

    if (_root.wall.hitTest(_x, _y, true)) {
    }

    ????????????????

  79. JM

    I have used the exact same code as you did for the coin test, yet the hero does not collect it. Again, it is exactly the same apart from the graphics and yet it makes no difference. Some help on this matter would be appreciated? I tried the solution Rhys posted as well.

  80. Malboro Jones

    Hi JM if your still interested I may have been having the same problem, it wasnt going through the pot or left but was through the right and bottom?

    It’s a lot more simple to make 4 lines, one one top,bottom, left and right, call them wall1/2/3/4 and in the
    _root.wall1.hitTest(_x + _height/2, _y, true) {
    }
    that would be for the bottom wall if instanced as wall1.
    Hope this is helpful for anyone having the same problem.

  81. Pingback: Programming Tutorials / Game Making Check Video Description convert files from youtube : nocostlargish

  82. Pingback: couponlargish » Vegas-Promotions.com

  83. recover

    Had a hard time getting the hit test to work until i realized that i didn’t label my wall. you do that by selecting it and the window will change at the bottom of the screen.

    newb mistake!

  84. xZeRo

    I downloaded your source code but I’m still trying to figure out how u managed to change the blue borders of the movie clip. I’m guessing this affects the performance of the hittest. Does anyone know how to resize the blue lines of the movie clip?

  85. Buddy

    Hey, great tutorial, my question is what would the code be if you wanted the wall to be just a solid object that when hit merely stops your hero instead of “killing” and resetting it? also it seems that only my left and top bounds are working properly, the rest don’t kick in to kill my hero until after it hits the top left corner of my hero… help please

  86. Metal Storm

    I’ve been coding with vb for yrs and have been interested in playing with flash. This tutorial is awsome and walks you through the valuable steps easily. Thank you very much.

  87. Twice

    To anyone wondering why yours is going so much slower than his, it’s because your FPS is probably still at the default 12 instead of the FPS he uses at 50. Hope that helped anyone wondering about that :D

  88. Jared

    When the coin changes locations after getting hit, it only moves on the x-axis (left and right). Is there any way to make it also move on the y-axis (up and down)?

  89. Jared

    Nevermind, I figured it out. For anybody else wondering the same thing you just have to add “_root.coin._y = Math.random()*200+50;” to line 37

  90. ryuzaki

    i collect coins few times and he move outside walls i tried to change this line
    _root.coin._x = Math.random()*400+50;
    but nothing changed plz help ;( (i tried 400 40 4 200 + 50 0 5 and ect.)

  91. Artlis

    @ Conor 2 spots down. When making your Movie clip, make sure the registration (those nine squares when you name a clip) is selected in the middle. At default its at the top left, screwing everything up.

  92. Eitan

    hey,
    i does anyone know how to take the movie to a new keyframe once a certain number of points is reached? im making a simple two-player ping pong style game and i cant get this to work. this is my actionscript at the moment:

    if (p1 >= 4) {
    gotoAndStop (2)
    }
    if (p2 >= 4) {
    gotoAndStop (3)
    }

    p1 and p2 are the variables for the each player’s points. i want it to go to a “player # wins!” screen once a player has more than four points? can anyone help? (please email your solution to eitan_muir@yahoo.com.au)
    P.S. i love these tutorials :)

  93. Derek

    I am actually creating flash games for a science fair project… and i only have until the 23rd. So, I just want to know, what program did you use and how did you convert it into a game?

  94. Justin

    I want to try the method used to collect the coins, but when I try it the ball won’t move.
    Anyone know what I’m doing wrong?

  95. zard

    i used lots of little squares on the perimeter of the hero and save them on an array in the hero a for loop checked if any had touched the coin if it did then it moved.

  96. DannyDaNinja

    PLEASE Help! When i created the wall all was cool. But then when i copyed and pasted a new one, the new one didn’t work!

  97. Amanda

    Wondering how you translate the hit test into AS3 I’ve tried about a million different things and none seem to work.

    Thanks ^_^

  98. Kieran MacGough

    Hi, Nice tutorial!

    “Line 28: I perform a hit test between the hero and the movieclip called “wall”. The _x and _y means that I am checking the collision only on the _x and _y attributes of the hero – its center -”

    I’ve tried replacing if “(_root.wall.hitTest(_x, _y, true))” with “if (_root.wall.hitTest(this), but the collisions happen constantly, the whole are inside the boundry get hit tested, not just the outside wall.

    Also, if I make separate MCs for each wall, and name all the instances “wall”, only one of the walls actually works for the hit test.

    Basically, each solution creates the other problem again.

    So, my question is – Is there a way to make it so that the whole of the ball has a hit test, not just the centre pixel?

    Thanks
    Kieran

  99. Drew

    Awesome! Took me a while to understand where to put the code. I am new to flash :)

    But I made this with it. You can draw anything in the wall layer and it will walk over it. Platformer code.

    onClipEvent (load) {
    hspd = 0;
    vspd = 0;
    i = 0;
    x1=0;
    x2=0;
    y1=0;
    y2=0;
    }
    onClipEvent (enterFrame) {

    if (Key.isDown(Key.LEFT)) {
    if (!_root.wall.hitTest(_x+hspd-1, _y-8, true)){
    if (hspd>-7){
    hspd-=1;
    }
    }
    }

    if (Key.isDown(Key.RIGHT)) {
    if (!_root.wall.hitTest(_x+hspd+1, _y-8, true)){
    if (hspd<7){
    hspd+=1;
    }
    }
    }

    if (Key.isDown(Key.UP)) {
    if (_root.wall.hitTest(_x, _y+1, true)){
    vspd = -7;
    }
    }

    if (!_root.wall.hitTest(_x+Math.round(hspd),_y+Math.round(vspd), true)) {
    vspd+=0.5;
    _x+=Math.round(hspd);
    _y+=Math.round(vspd);
    }
    else{
    i = 0;
    while((i0){
    hspd-=Math.min(Math.abs(hspd),0.5);
    }
    else{
    hspd+=Math.min(Math.abs(hspd),0.5);
    }
    i = 0;
    while((!_root.wall.hitTest(_x-i,_y-16, true)) && (i<16)){
    i+=1;
    }
    x1 = i-2;
    i = 0;
    while((!_root.wall.hitTest(_x+i,_y-16, true)) && (i<16)){
    i+=1;
    }
    x2 = i-2;
    i = 0;
    while((!_root.wall.hitTest(_x-x1,_y-16+i, true))){
    i+=1;
    }
    y1 = Math.min(i,48);
    i = 0;
    while((!_root.wall.hitTest(_x+x2,_y-16+i, true))){
    i+=1;
    }
    y2 = Math.min(i,48);
    _rotation = -Math.round(Math.atan(((_y+y1-16)-(_y+y2-16))/((_x+x2)-(_x-x1)))*180/Math.PI);
    }

  100. gabriel

    anyone no how to give the ball the ability to shoot, I’m taking this tutorial and going somewhere else with it.

  101. argon

    im using macromedia flash pro 8.
    How do i make the wall thing work? after i draw the wall then convert it to symbol, i named it wall and clicked movie clip. and clicked export for actionscript on the linkage.
    for the ball i made a new layer and did the same thing as the wall but named it hero then i pasted the actionscript on it… when i run it the ball would simply pass through wall.
    how do i solve this?
    please help anyone! asap…

  102. Jugx

    I finally understood that line with the coin O_o the thing is my Ball was soooo big that I’m having a hard time hitting it with my Balls Registration ( in the upper left corner ) … Thanks for this tutorial XD I’m a complete beginner but I’m starting to get the syntax for this type of game.

  103. me

    what does it mean when it says
    “Just create a new movieclip called “hero_hit” and insert into the hero’s movieclip, at its center. ”
    ??

  104. L

    Hello
    This is a really nice tutorial, but I’ve got a few problems.
    First before I waste your time, this works in CS4 right?

    If it does:
    hitTest doesn’t work for me.
    This is my code on my hero movieclip

    onClipEvent (load) {
    power = 8;
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.LEFT)) {
    _x -= power;
    }
    if (Key.isDown(Key.RIGHT)) {
    _x += power;
    }
    if (Key.isDown(Key.UP)) {
    _y -= power;
    }
    if (Key.isDown(Key.DOWN)) {
    _y += power;
    }
    }
    if (_root.coin.hitTest(this.hero_hit)) {
    _root.coin._x = Math.random()*400+50;
    }

    I downloaded the zip file and checked that I had inserted hero_hit into the hero movieclip.
    What am I doing wrong?

  105. Nodnarb3

    what does it mean when it says
    “Just create a new movieclip called “hero_hit” and insert into the hero’s movieclip, at its center. ”
    ??

    how do you insert the hero_hit to the hero’s movie clip????

    I wanna know this too! Im using Flash CS5, everything else has worked up until
    you said “Just create a new movieclip called “hero_hit” and insert into the hero’s movieclip, at its center. ”

    there ya completely lost me, i do my best interpretation of that and the hero moves with out the new hero_hit…. Other than this, it has been an awesome TuT!

  106. Tapasvi

    Hey i want my ball to reset as it touches the coin, i tried replacing the coin coding but it didnt work
    Here my coding :/
    if (_root.wall.hitTest(this.hero_hit)) {
    xspeed=0;
    yspeed=0;
    _x = 225;
    _y = 125;
    }

  107. jonas

    hello I’m “green” this is my first game in as2 and I c’ant make in as2 mc chaneg mooving direction I’m waiting samting liake soliution anser

  108. Pingback: Merangkum Makna » Blog Archive » Tugas 11 Praktikum Multimedia

Leave a Reply

Your email address will not be published. Required fields are marked *