Create a flash draw game like Line Rider or others – part 4

March 31st update: part 5 released

Here we go with the 4th part. Read steps 1, 2 and 3 and you’re ready to go.

In the last example in step 3 we had our bouncing ball but some of you noticed that sometimes the ball appears to be “stuck” in the ground, making some fake bounces.

Let’s understand why.

In the next movie, I created another movieclip instanced as “last_hit”.

Let’s see what happens.

On lines 26-27 I assign to last_hit _x and _y the position where we checked the collision between the ball and the ground

As you can see, sometimes the black ball (last_hit) seems to “sink” in the ground, and that’s when an error may occur. If the ball sinks, and after the first bouncing frame is still inside the ground, the script will believe the ball encountered another wall and make it bounce again. Look at this picture:

Fake bounce

If the ball sinks too much into the ground, line in position 2, during the bounce may collide again with the ground causing a fake bounce.

There are several ways to fix this issue, we could check the collision again and verify if there is a fake bounce.

Remember, though, that we are already doing a quite CPU expansive task, so determining twice (or more) in a frame all fake bounces may cause the game to slow down too much.

I found a way that roughly approximates the right way to avoid fake bounces and that works well, specially if you consider we are creating a game and not an accurate simulation.

I just “remember” the last _x and _y position where there wasn’t any collision and set the collision point at that point.

The physics works in the same way, but the bounce won’t start from the ground but from the last spot the ball was sighted before it touched the wall.

Lines 62-65 assign the actual _x and _y position to a couple of variables called old_x and old_y in case the ball didn’t hit the terrain, while lines 59-60 set the _x and _y ball position to old_x and old_y. Now the ball is not on the ground so we cannot have any fake bounce.

You will notice sometimes there are about 2 or 3 pixels of error, but this can be tolerated in a game where fun is more important than simulation.

Ok, let’s resume the drawing

This is a draw game but it’s since part 1 we aren’t drawing. To put all together, I created a GO! button that will release the ball and added the drawing capability.

To do this, I changed the actions in frame 1

To start drawing as seen in tutorial 1, and put this actionscript in the button

to release the ball.

Now I want to stop drawing when the “GO!” button is pressed (it would be too easy if you could draw once in game, you have to foresee the ball bounces!), and I want a “RESET!” button to start drawing again.

To reset the stage, simply add a rest button with this actionscript:

Lines 2-3: Reset ball position

Lines 4-5: Reset ball speed

Line 6: The go variable is set to false (the ball is not moving)

Lines 7-8: Clear the stage and start drawing again

Finally, I want to stop drawing when the ball is running… and of course I want…

The exit

I created another movieclip instanced as exit

First, let’s see how to prevent the player from drawing once the ball is going.

The actions on frame 1 are:

Line 6 Simply checks the go variable and let the player draw only if go is false

About the exit, the ball actionscript will be:

Lines 12-14 stop the ball if it touches the exit.

Now you should be ready to create your first ball drawing game… why don’t you send me your works? I will publish on this site.

The tutorial is not over of course… we still have to see how to advance levels, how to change the ball with a car or a guy, and so on.

Meanwhile, download source codes and give me feedback, then proceed to part 5

  • Pingback: Create a flash draw game like Line Rider or others - part 1 at Emanuele Feronato()

  • Pingback: Create a flash draw game like Line Rider or others - part 2 at Emanuele Feronato()

  • Pingback: Create a flash draw game like Line Rider or others - part 3 at Emanuele Feronato()

  • Steve

    Is it just me, or are the movies not loading?

    But anyway, nice tut man! Can’t wait for the rest!

  • Ben

    Just a quickie to note that I love the tutorials and can’t wait to see more from you. Thanks a lot for putting the time into these – they’re most appreciated.

  • mousey

    ACE, what will we be learning to do inthe next tutorial?

  • Alex

    why do some of the tutorials not work in other versions of flash

  • Greg

    Those ‘2 or 3 pixels of error’ are quite pronounced in my version if I increase the size of the ball and the radius associated with it. I’ve noticed it is worse when the collision detection takes place on the left hand side of the ball with steep line slopes. Flat lines and ones that go up and to the right seem to work alright. Any suggestions? Thank you!

  • abhilash

    Hey man nice tut cant wait for the next

  • hey,whats the actionscript to make to ball move when Go is clicked?

  • abhilash

    in reply to byitdude:
    code for the button(‘GO’) is

    on(release) {
    go=true;
    }
    put this code in the button u make.
    **************************************
    my problem:
    with me, everything is alright except the reset button when I press the button the ball stops where it is & when the GO button is again pressed it falls with the power it had before the RESET was pressed. PLEASE HELP

  • tim

    Hurry up and post part 5 as fast as you can, i just cant wait

    oh and by the way the game still needs alot of work, the ball wont roll, it just bounces

  • Freaky-freak-freaker

    Hey, in one of these, can you maybe show us how to make it so that if the character or ball hits the grounds too hard, it resets? I would like that for a future game of mine.

  • ISA 4 Te Win

    i fink the games sucks

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

  • lol it works fine but maybe a moving shadow and when u have like 5 bounces and hit reset it errases ur lines and stuff but it still has 5 bounces

  • eblup

    you know the ball can ride the line and not bounce if you put the ball like a car and have it fase the angle of the line you det det de

  • hi can some on help me when the ball touches the box how can you make it go onto another frame if some one can help iot will be much appreciated

  • uhhhhhh

    eblup what hapnes when you change angle?? and its de de u dee

  • mnmn

    isa i dont “fink” these games suck

  • hey

    can u guys post another game but do it more spectific and post the easy game and short..? thank you help me plz

  • hey

    my problem is i dont know how to do the wall. plz post for me another simple game and short or u guys can teach me how to do the wall ore bountri plz help thank you

  • Smartz

    Once again, great tut! 2 Problems:
    1: The ball never stops moving.
    2: This is supposed to be a linerider game, not a ball bouncing game…;-)
    Keep up the good work!

  • ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    MARTIN:
    hi can some on help me when the ball touches the box how can you make it go onto another frame if some one can help iot will be much appreciated
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    just put in collision with exit:

    gotoAndStop(2)

    2 refering to what frame :-)

  • so what you say jordanleffl all you have to do is put gotoAndStop(2) on the exit and that is it

  • Kieron

    Yes Martin. Where you have your hit test for the exit, simply add “gotoAndStop(‘frame_number’)”. But… If you are testing if the ball hits in the exits actions, then you need “_root.gotoAndStop(‘frame number’)”. So, root on the exit, no root on the frame. Makes sense?

  • i am a begginer at flash and can someone give me the hit test i need you all have been helpful thanks

    please check out my website

  • WOW! I Love this! I mad a quick little game out of this…
    http://img221.imageshack.us/my.php?image=linebouncerdp0.swf

    I cant wait for part five!

  • hey i love the tutorials, but was wondering how do you make the object roll or slide on the line instead of bounce?

  • hey, this is just great. I’m goona use some of what I learned here in a project for my college. keep it up, I’ll be checking!!!

    regards,

  • Pingback: Create a flash draw game like Line Rider or others - part 5 at Emanuele Feronato()

  • Jordan

    ty very much i made a pretty cool game because of this tut.

  • Daniel

    In Adobe Flash Or Macromedia ????

  • how do u stop the ball from flying off the screen without having to draw a box while in game?

  • Derrick Niehaus

    BAHAHAHAHH someone stole your tutorial completely and made it into a game.. here
    thats so funny! they didnt even change the line color.. or get rid of the bouce counter.. or the circle where the ball had been

  • Pingback: Do my tutorials suck? at Emanuele Feronato()

  • N00b

    How do you get rid of the part that shows the last bounce and the bounces count?
    I have an idea but I always encounter many errors!
    I’ve also made an artillery game and it works! I’m really pleased and the tutorials are amazing!
    Much thanks! ^^

  • For some reason, My game lags a lot. When i try to draw, sometimes the line doesn’t show up.
    Can someone help me?
    Oh and by the way, I’m using Flash MX educational.

  • abhilash

    in reply to darth turtle:
    check the frame rate of the movie.To do that just press CTRL J
    and change the FPS(frames per second)

  • **Error** Line 1: Clip events are permitted only for movie clip instances
    onClipEvent (load) {

    **Error** Line 10: Clip events are permitted only for movie clip instances
    onClipEvent (enterFrame) {

  • abhilash

    in reply to Eth:
    I think you have copied action script given for the ball to the frame.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~
    For everybody:
    To rotate the ball just add
    “_rotation = xspeed;” below the
    “_x = _x xspeed;” in the ball AS

  • Yeah, actually how DO you get rid of the ball count? lol

  • Pingback: Create a flash draw game like Line Rider or others - A different approach at Emanuele Feronato()

  • Todd Clark

    Finally, drawn line collisions. I don’t know if you realize that this is probably one of a very few places that has a tutorial about this. Screw vector based tile grids for collisions. Now I can finally have very dynamic point to point coordinates for walls, etc.. instead of the complex tiles and endless modularity. Good job being awesome.

  • Marius

    Thanks again for your great tutorial! But I’d like to see how one can make the ball ROLL down a line without bouncing… How can it be done? Thanks

  • Carl

    Hi! Thanks for your tutorials, they’re the best, I’m sooo excited making my little ball game hehe ^^ but I’m facing one trouble when I want to make a thing for two balls, and one of them start to float in space.. really strange. Do I have to change the variable names or something? Thanks again!

  • Carl

    Actually got that one allready, and voila! my game’s finished! :) If you (or someone else)’d like to download it, it’s here: http://rapidshare.com/files/47444843/_Pelota_.exe
    //it’s in spanish :)

  • Pingback: Managing ball vs ball collision with Flash at Emanuele Feronato()

  • SlimJim

    We got a thousand and nine Bounces

  • Dalez

    Hey, this is a great tut! But how do you make it slide down the line and not bouce? All so, how do you make it so you can rub a bit of the line out?
    Also, one more question… how do you make it so that you can move over to the next screen with with a hand? Like the real Linerider, where you click the hand and you can move the frame a bit down. Thanks very much, and very good tut!

  • I love this website it is so cool to just watch funny falling and i wish it was cartoon guy playing it and color while the guy is trying your sled jump and your the best!!!!!!!!

  • jithin

    i want a car to collide with a line

  • thinkquick

    I notice this game (“paintball”) is almost identical to your concept : http://www.newgrounds.com/portal/view/346873

    Although, looks like it was a year earlier.

  • You could also get around the fake bounce problem by checking for collisions ahead:

    (…)
    posX = _x + (radius*Math.cos(x*(360/precision))) + xspeed;
    posY = _y + (radius*Math.sin(x*(360/precision))) + yspeed;
    if(_root.object.hitTest(posX,posY,true)){
    (…)

  • theman

    how do you get the ball to reset. I can get mine to stop, but not reset.

  • Pingback: linerider game()

  • Pingback: 50 Ways to Make us HATE your Flash Game | The Helion Code()

  • Pingback: 50 Ways to Make Us HATE Your Flash Game | Mr Sun Studios()

  • Your general method here is good, and does work – this is one of the few places that explains how to do this. However, your code NEEDS optimisation! You talk about efficiency but miss blindingly obvious opportunities for this.

    You repeat calculations, replace things like ‘x*360/precision’ with a variable so you don’t have to calculate twice. Also, why convert to degrees? Do all the calculations in radians and you can remove a few calculations.

    Oh, I suggest commenting your code instead of explaining the lines underneath – just a thought.

  • Emanuele Feronato

    you’re right ninja… I’ll publish a “revamped” version soon

  • Emanuele! I’ve created a more efficient version of your simple bouncing off the terrain code.

    I knew something was wrong with all those if statements you had to change the angle around. Then the solution came to me… Use Math.atan2!

    Instead of using, for example, Math.atan(yspeed/(xspeed*-1)) all you need is Math.atan2(yspeed, -xspeed). If you use that, you won’t need to change the angles around.

  • julian

    how do i make walls
    for the ball to bounce on
    and you need to try and get the ball around the walls?

  • Frozen Chrome Entertainment

    This is great, however i think i missed the part where i get to make a car, not a ball. Im imagining making loading a car as a MC but then the car will bounce like a ball. So therefore i think this tutorial was for a game like softball, and not line rider, so can you please tell me how to make line rider please? I’m not trying to be mean, the way i typed this sounds mean though.

  • Bob

    I made this game and i added walls (you can see it at my site) But if the ball starts going fast enough the ball goes straight through the line.

  • Bob

    my site is http://www.freewebs.com/mygamesrawsom/
    sorry i forgot to post it

  • Luke

    I found a solution for all the people who want to reset bounces when you click reset.

    Add this coding into the reset button:
    on (release) {

    _root.ball.bounces = 0;
    _root.collisions.text = “Draw the terrain then click GO!”;

    So the code will look like this after you add it:

    on (release) {
    _root.ball._x = 27;
    _root.ball._y = 47;
    _root.ball.xspeed = 0;
    _root.ball.yspeed = 0;
    _root.go = false;
    _root.terrain.clear();
    _root.terrain.lineStyle(10, 0xdd00dd, 100);
    _root.ball.bounces = 0;
    _root.collisions.text = “Draw the terrain then click GO!”;
    }

  • some1 who needs help

    I can´t make the game stop painting when go is pushed. I copied the code but cant get it work:
    it still draws when go is pushed…
    Please help me

  • some1 who don`t needs help

    I solved it myself: it was the shadow layer.
    I dont know what it does but when I removed it everything worked. XD

  • black Dragon

    oh…coolll

  • Cleveland_King23

    Okay so I downloaded the source files and editted them to my liking, but when i added walls and obsticles to get around, everytime i clicked the mouse to draw lines the lines are drawn but not where im clicking. If anyone knows how to fix this glitch it would be appreciated.

  • rednek

    I can hardly describe the awesomeness of this tutorial Emanuele, thanks a lot!

    Is it possible to make the ball stop at some point? This is never ending bounce, I am reading the code over and over and still can’t come to solution :C

  • Jordan Power

    Every Thing Works But How Would You Make It That When You Hit The Finish It Goes To Another Frame?

  • Very cool. Thx for help, im beginer in flash. ;)

  • ALEX

    I am wanting to do a thing with the part of this tutorial in which says collisions. I must find way to make platform male create a rotation for when a slope is going down. I must find a way to order the male to keep both feet touching the ground with an angle like so
    \
    \
    \
    \
    \ and male requires a both feet on the slope while running. Helpful would be, more helpful would be making speed move faster like downhill running. Also would make more going downhill and then right. And if a hill makes into a slope then continues with more real flying through the air and gravity is make more realistic acceleration.
    Also I need make to a platform to jump on is cannot go through the bottom, or the sides. Helpful would be thanked and Google Translate is rule!

  • Ok, this is SERIOUSLY cool. Thanks for posting! Possibilities…. :)

  • Pingback: Daniels programming site » The bouncing ball in Python with pygtk and cairo()

  • Teoh

    Could you redo this is as3 ?

  • ari

    Thank you so much!
    Your tutorials is cool .. i need this for my school project
    I have tried everything but I have a problem

    I want to move the function go inside the ball
    so we just need to click the mouse on the ball and the ball will run fall

    anyone you can help me .. you are great and I am very much grateful

  • Sammy

    Thanks Emanuele. I am jealous of you. This code is one of a kind, this is truly remarkable. It’s wonderful. A lot of people are complaining about the ball not stopping to bounce. I figured out why it does this. All the calculations are made with yspeed with the gravity already added. you just need to move this line: yspeed = yspeed+gravity; to the bottom just before ball.y += yspeed; However it still shakes a bit, because no matter how small yspeed gets it still will be worth something. We can easily stop this by making a simple loop to make the ball stop moving when yspeed goes under a certain value, or something like that. Thanks for helping me. Keep up the brilliant work. Ps. can I use this code on an upcoming project?