Create a flash draw game like Line Rider or others - A different approach - Part 3

June 15, 2007 by Emanuele Feronato
Filed Under Flash, Users contributions •  

Maybe some of you did not notice it, but there was a real pearl in a comment of Create a flash draw game blike Line Rider or others - A different approach - Part 2 post.

Jesuson studied all the source codes and came up with this comment:

----------------

I have been testing it and it chash a lot of times. I would change next things:
1. For the collision response, to calculate the out velocity I would use

vx1=-cosa*w.vx sina*w.vy;
vy1=(-cosa*w.vy-sina*w.vx)*bounce;

w.vx = -cosa*vx1-sina*vy1; //ball X velocity
w.vy = -cosa*vy1 sina*vx1; //ball Y velocity

Now it has got aceleration and velocity won’t be infinite.

2. There is some problems when you test the perimeter of the ball for collisions. The first is you don’t do it in order. For do it in order change
px=w._x w.radius*Math.sin(i*360/precision);
py=w._y-w.radius*Math.cos(i*360/precision);
by
px=w._x w.radius*Math.sin(i*Math.PI/precision);
py=w._y-w.radius*Math.cos(i*Math.PI/precision);

The second is, what happend if there are diferent points of collisions? for expample if ball collide with floor and wall, you don’t must take it like a single collision, becouse the response won’t be good.
For fix it I take all the collisions points what are together (For detect than it´s together you have to detect them in order like I said)and put it in a collision group array, and then I calculate diferents responses with diferent arrays.

Here you can see what I’m speaking about:
Bad method –> http://denvish.net/ulf/130607/55530_collisions4.fla
Good method –> http://denvish.net/ulf/130607/55602_collisions5.fla

Look what happend in two cases when the ball hit the wall.
note: use up/down to acelerate/brake.

----------------

I downloaded both methods and the "good" one is... really good!

This is the actionscript with some comments from the author

PLAIN TEXT
ACTIONSCRIPT:
  1. gravity = .2;
  2. bounce = 0;
  3. precision = 360;
  4. w1.vx = 0;
  5. w1.vy = 0;
  6. w1.vAngle = 0;
  7. w1.radius = w1._width/2;
  8. w1.col = false;
  9. w1.cArray = [];
  10. onEnterFrame = function () {
  11.     w1.vy += gravity;
  12.     checkWL1(w1, level);
  13.     checkWL2(w1, level);
  14.     control(w1);
  15.     w1._x += w1.vx;
  16.     w1._y += w1.vy;
  17.     w1._rotation += w1.vAngle;
  18.     scrollWorld();
  19. };
  20. ////////////////// Colisiones /////////////////////////////
  21. function checkWL1(w, level) {
  22.     w.sumX = 0;
  23.     w.sumY = 0;
  24.     w.collisions = 0;
  25.     for (i=1; i<precision; i++) {
  26.         px = w._x+w.radius*Math.sin(i*Math.PI*2/precision);
  27.         py = w._y-w.radius*Math.cos(i*Math.PI*2/precision);
  28.         checkDL(px, py, w, level);
  29.         w.cArray.push([px, py, w.col2]);
  30.     }
  31.     if (w.collisions>0) {
  32.         checkArray(w);
  33.         //collisionResponse(w);
  34.     }
  35.     w.cArray = [];
  36. }
  37. function checkWL2(w, level) {
  38.     w.col = false;
  39.     for (i=1; i<precision/10; i++) {
  40.         px = w._x+(w.radius+5)*Math.sin(i*360/precision);
  41.         py = w._y-(w.radius+5)*Math.cos(i*360/precision);
  42.         checkDL(px, py, w, level);
  43.     }
  44.     if (w.collisions>0) {
  45.         w.col = true;
  46.     }
  47. }
  48. function checkDL(px, py, w, l) {
  49.     if (l.hitTest(px, py, true)) {
  50.         w.sumX += px;
  51.         w.sumY += py;
  52.         w.collisions++;
  53.         w.col2 = true;
  54.     } else {
  55.         w.col2 = false;
  56.     }
  57. }
  58. function collisionResponse(w) {
  59.     w.hitX = w1.sumX/w.collisions;
  60.     w.hitY = w.sumY/w.collisions;
  61.     dx = w._x-w.hitX;
  62.     dy = w._y-w.hitY;
  63.     d = Math.sqrt((dx*dx)+(dy*dy));
  64.     d2 = w.radius-d;
  65.     angle = Math.atan(dx/dy);
  66.     if (dy>0) {
  67.         cosa = Math.cos(angle);
  68.         sina = Math.sin(angle);
  69.     } else {
  70.         cosa = -Math.cos(angle);
  71.         sina = -Math.sin(angle);
  72.     }
  73.     w.sina = sina;
  74.     w.cosa = cosa;
  75.     w._x += d2*sina*2;
  76.     w._y += d2*cosa*2;
  77.     v = Math.sqrt((w.vx*w.vx)+(w.vy*w.vy));
  78.     vx1 = -cosa*w.vx+sina*w.vy;
  79.     vy1 = (-cosa*w.vy-sina*w.vx)*bounce;
  80.     w.vx = -cosa*vx1-sina*vy1;
  81.     w.vy = -cosa*vy1+sina*vx1;
  82. }
  83. function checkArray(w) {
  84.     cont = 20;
  85.     w.sumX = 0;
  86.     w.sumY = 0;
  87.     w.collisions = 0;
  88.     for (i=0; i<precision-1; i++) {
  89.         if (w.cArray[i][2]) {
  90.             w.sumX += w.cArray[i][0];
  91.             w.sumY += w.cArray[i][1];
  92.             w.collisions++;
  93.         } else {
  94.             if (w.collisions>0) {
  95.                 if (cont == 0) {
  96.                     collisionResponse(w);
  97.                     w.collisions = 0;
  98.                     w.sumX = 0;
  99.                     w.sumY = 0;
  100.                     cont = 20;
  101.                 } else {
  102.                     cont--;
  103.                 }
  104.             }
  105.         }
  106.     }
  107. }
  108. ///////////////////// Control ///////////////////////////////
  109. function control(w1) {
  110.     if (Key.isDown(38) && w1.col && w1.vx<10) {
  111.         w1.vx += .3;
  112.     }
  113.     if (Key.isDown(40) && w1.col && w1.vx>-3) {
  114.         w1.vx -= .1;
  115.     }
  116. }
  117. ///////////////////// Camera  ////////////////////////////
  118. function scrollWorld() {
  119.     if (w1._x>350 && w1.vx>0) {
  120.         level._x -= w1.vx;
  121.         w1._x -= w1.vx;
  122.     }
  123.     if (w1._x<200 && w1.vx<0) {
  124.         level._x -= w1.vx;
  125.         w1._x -= w1.vx;
  126.     }
  127. }

And this is the result (up and down arrows to move the ball)

Now I am going to study more in depth this work because I find it really interesting, so expect a tutorial based on this code during next days.

And this is the source code hosted on my site, just in case some day the link provied by Jesuson should disappear.

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 (6 votes, average: 4.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.

8 Responses to “Create a flash draw game like Line Rider or others - A different approach - Part 3”

  1. mousey on June 16th, 2007 10:22 am

    Nice, also will there be a tutorail coming up showing us how to go in the toher direction because at the moment the ball or objest only move one way and constantly accelerates!

    Very good Though.

  2. Callum on June 16th, 2007 6:58 pm

    Wow, thats brillian. My game is nearlly finished. YOu are truley the greatest Emanuele in the world [:

  3. Jesuson on June 20th, 2007 3:24 am

    Hello!!
    I’m happy to see you liked this. I want to tell you about another problem with my code.
    When I work with the array of points, this array represent the collision points of the circle, and calculate the collisions zones(points together),but, if there are points in the beginning and in the end of the array, THIS IS THE SAME ZONE.
    You will see this problem if you change the gravity to a negative value, then, when the ball collision with the roof the response is not good.

    I will post my solution (is a good one for my game, but is not the best) with better comments, sorry for this in last one, I didn’t know you would post it here.

    http://denvish.net/ulf/200607/12156_collisions5.fla

    See you!!

  4. Jesuson on June 20th, 2007 3:55 am

    Forgot to show you this first example. This is a game a made when I started to study your tutorials.The collisions are based in distance between a line and a point, and not using hitTest.
    The game hadn’t got good scores on newground :(, so I would like to share with all of you the code.

    Notice than this one has got a worst script level, so don’t take it like a good way doing things.

    http://denvish.net/ulf/200607/13907_LineMotoCross_1.0.fla

  5. Splashy5 on September 29th, 2007 2:40 am

    how would you make it so when you get tho a point like end so it goes to the next level?????

  6. Austin Witherspoon on August 6th, 2008 1:42 am

    splashy5, You would have to make a hitTest and when the the ball hit the dot, it would take you to the frame with the next level.

Leave a Reply




Trackbacks

  1. Create a flash draw game like Line Rider or others - A different approach at Emanuele Feronato on June 15th, 2007 2:43 pm

    [...] Create a flash draw game like Line Rider or others - A different approach Published April 8th, 2007 in Flash and Users contributions. April 21st update: part 2 released June 15th update: part 3 released [...]

  2. Create a flash draw game like Line Rider or others - A different approach - Part 2 at Emanuele Feronato on June 15th, 2007 2:44 pm

    [...] June 15th update: part 3 released [...]