A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: moving along a tangent

  1. #1
    I'm sure this question has been asked before, but - I'm trying to recreate an asteroids-like game, where the left/right keys rotate the ship counter/clockwise, and the up arrow then moves the ship in the selected direction. I don't have a problem with the rotation, or moving horizontally/vertically, but I don't know how to get the directional movement to work.

    There is an example of this in the Flash 4.0 samples called 'Fighter', but I'm hoping there is an easier way of doing the same thing, maybe using the Math objects (not my strong point).

    Any suggestions?

  2. #2
    Senior Member
    Join Date
    Jun 2000
    Posts
    896
    so i assume so far you are using to separate speed variables:
    xmov and ymov is what i use.

    then you set an accelleration for every time up is pressed, say....accell=1

    then when up is pressed

    ymov=ymov+accell*math.sin((math.pi/180)*rotation)
    xmov=xmov+accell*math.cos((math.pi/180)*rotation)

    if you remove the ymov and xmov from the right side of the equation you have a car driving. if you leave it in it is more space like.

    good luck!!

  3. #3
    jobemjobem: thanks for the help, but still having some problems - probably due to not really understanding the math... Heres my code, the idea is to move the ship manually, I havent go as far as creating a 'thrust' effect (although that would be nice). At the moment, it seems to always jump to the zero position, and then only move correctly if the direction is down/right or up/left. I've attached the script to the object itself.

    onClipEvent (load) {
    step = 15;
    }
    onClipEvent (enterFrame) {
    angle = this._rotation;
    if (Key.isDown(Key.LEFT)) {
    this._rotation = angle-step;
    } else if (Key.isDown(Key.RIGHT)) {
    this._rotation = angle+step;
    }
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.UP)) {
    accel=4;
    ymov = ymov+ accel*Math.sin((Math.PI/180)*angle);
    xmov = ymov+ accel*Math.cos((Math.PI/180)*angle);
    this._x = xmov;
    this._y = ymov;
    }
    }

  4. #4
    Senior Member
    Join Date
    Jun 2000
    Posts
    896
    this._x = xmov;
    this._y = ymov;

    should be:

    this._x = this._x + xmov;
    this._y = this._y + ymov;

    now i'll look at the restof your code

  5. #5
    Senior Member
    Join Date
    Jun 2000
    Posts
    896
    copy and paste this onto your clip (make your fla 30fps):

    onClipEvent (load) {
    step = 2;
    accel = 1;
    }
    onClipEvent (enterFrame) {
    angle = this._rotation;
    if (Key.isDown(Key.LEFT)) {
    this._rotation = angle-step;
    } else if (Key.isDown(Key.RIGHT)) {
    this._rotation = angle+step;
    }
    }
    onClipEvent (enterFrame) {
    if (Key.isDown(Key.UP)) {
    ymov = ymov+accel*Math.sin((Math.PI/180)*this._rotation);
    xmov = ymov+accel*Math.cos((Math.PI/180)*this._rotation);
    }
    this._x = this._x+xmov;
    this._y = this._y+ymov;
    }

    it should do the trick

  6. #6
    jobe

    Again, thanks for the help, much appreciated. This works perfectly, but there's one thing I don't understand - the ship moves initially to the right instead of upwards. I can get round this by rotating the graphic itself 90 degrees, and then it looks right (the ship's nose points in the direction of movement).

    I suppose I should learn the math that makes the effect work... can you suggest any tutorials/explanations that would help with the maths side?

    Cheers


    Paul


  7. #7
    Senior Member
    Join Date
    Jun 2000
    Posts
    896
    no problem man

    ok, in flash angle are measured automatically with respect to the x-axis. that is the horizontal line. but the y-axis is upsie down. mean the lower you get the higher the value. so a positive angle is one that starts at the x-axis (vertex on the left) and rotates downward.

    just thought you should know that. so when i made my example i figured the ship would start at 0 degrees, meaning pointing right. so that code assumes that your ship is pointing right to begin with.

    good luck!

  8. #8
    Right... I knew about the way the x,y measurements work in Flash, but it never occured to me that the angles are measured from the x-axis. I had assumed that if an object is pointing upwards, then that would be zero degrees...

    Thanks for all that, your explanation was a big help.

  9. #9
    Senior Member
    Join Date
    Jun 2000
    Posts
    911
    Hey paulg,
    I saw your post in one of the other forums and I started typing out an explanation of how to do it but it got kind of late so I put it off till the next day...then I forgot. But I see that jobem has got you covered. However here is what I had typed just in case it helps (its not finished)...it also may not be entirely correct because I never proof read it...in any case:

    Ok...are you familiar with vectors? Dont worry if you are not because even my knowledge is pretty limited when it comes to them. I do however know that a vector consists of a direction (angle) and a magnitude (velocity). Now there is really no point in me going into a full tutorial on vectors or the notation in which vectors should be written in because believe it or not that previous sentence is the only thing you need to know about vectors. Look at this picture for a simple illustration of a vector:

    Code:
            /
          / velocity
        /
      /
    /  theta
    Now of course you need an end point and beginning for that but let's not really worry about anything like that. So the velocity is the length of that line and the direction is "theta" which is the angle that diagonal line makes with the x-axis. Well many physics and math papers and text books you read will deal with vectors so it is good to know about them...however in Flash I like to work with individual x- and y-velocities instead. So we need to find a way of translating the vector into seperate axes velocities. Let's imagine our vector as a right triangle:

    Code:
                  /|
                /  |
              /    |
       vel /      |  y-vel
          /        |
        /          |
      /            |
    / theta__|
    
       x-vel
    And in addition to that lets take the sine and cosine of theta. Just in case you do not know the sine of an angle is the ration of an opposite side to the angle divided by the hypotenuse of a right triangle. So the sine of theta above would be y-vel divided by vel. And the cosine of an angle is the adjacent side divided by the hypotenuse...so x-vel divided by vel. So lets take the sine and cosine of theta:

    Code:
                          x-vel
    cos (theta) = -------
                           vel
    
                          y-vel
    sin (theta) = -------
                           vel
    Now all we have to do is use simple Algebra to solve for "x-vel" and "y-vel" by multiplying both sides of the equations by "vel"...so the final equations are:

    Code:
    x-vel = vel * cos (theta)
    y-vel = vel * sin (theta)
    There you go!...the equations needed to translate from vectors to x- and y-velocities.

    So now how to apply to your game? Well first of all you know that when your left, and right keys are pressed they are going to effect the rotation so let's add that first. Oh yeah and before I go on...I just wanted to add that I have never done this before so Im kind of making this up as I go...Im actually making the game as I go through this so I will have a sample for you at the end. Well this is the script I have so far:

    Code:
    onClipEvent (load) {
    	rotSpeed = 3;
    }
    
    onClipEvent (enterFrame) {
    	if (Key.isDown (Key.LEFT)) {
    		this._rotation -= rotSpeed;
    	} else if (Key.isDown (Key.RIGHT)) {
    		this._rotation += rotSpeed;
    	}
    }
    No big deal right? I have a onClipEvent (load) action to initialize the speed at which I want the ship to rotate when a key is pressed. Then the main part of the script checks to see if on of the keys have been pressed and then rotates the ship accordingly. And just in case you dont know this: x += y is the same as this: x = x + y ...its just a shorter, cleaner way of doing it and also a personal prefrence.

    So lets move on to the interesting stuff. We know that when the arrow up key is press we want to add to the current velocity and vice versa for the down arrow. So lets add a script to do that (this is without all the previous script):

    Code:
    onClipEvent (load) {
    	incVel = 2;
    }
    
    onClipEvent (enterFrame) {
    	if (Key.isDown (Key.UP)) {
    		vel += incVel;
    	} else if (Key.isDown (Key.DOWN)) {
    		vel -= incVel;
    	}
    }
    Make sure to remember that just because Im not putting the whole script everytime that doesnt mean we wont have it at the end...once we are done we are going to compile everything into one script.

    So that above script is actually pretty simple. Once again the onClipEvent (load) command initializes a variable, this time used to control how fast the velocity will increase when holding down a key. Then a few simple checks and you add the current velocity with the increment velocity variable or subtract depending on which key is pressed.

    Well it looks like we have all the information we need...a velocity and a direction (angle, rotation, direction whatever)...all we have to do is translate it into x- and y-velocities.
    And that is where I stopped...you can see how much Jobem's method and mine look alike. There are also just a few other things to think of which Jobem included in his script.

    Hope it helps and good luck.


  10. #10
    Ahab -

    Your tutorial came at the right time... just started reading 'teach yourself trigonometry', which is not particularly exciting. What's really useful with the stuff you sent, is to see the math side put into the context of Flash and games coding, rather than just a bunch of equations in a book. It would be great to see the finished code...

    Thanks for the help, much appreciation.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center