How do you animate a display object in an arc in AS3?

Question

This is for a game in a flash AS3 only project.

the player controls a character with a gun. By clicking on the screen the gun fires a missile in an arc to the point clicked.

Whats the best way to calculate the x and y co-ordinates of the missile for each frame?

Answer 1

Well, an arc is a piece of a circle. The general formulas for a circle are

x = r * cos(a) + cx
y = r * sin(a) + cy

Where r is the radius of the circle, a is the angle along the circle (in radians), and cx and cy are the coordinates of the center of the circle.

So each frame you would increment the angle (a) and recalculate the position with those formulas.

The trick will be determining the appropriate radius and center points. You could probably figure out an algorithm that would find a center point based on a fixed radius.

Edit: To get the same velocity at different radii.

To get velocity (pixels/sec) from angular velocity (rad/sec)

v = Δa * r

So if we pick some v, then Δa = v / r where v is some constant and r is the radius of the circle.

Answer 2

I think the missiles should fly in projectile rather than an arc path...

If you really care having a realistic motion, study some physic equations.

If you just want to have some simple and cartoon-like motion, using TweenMax's bezier/bezierThrough will be extremely easy. See the examples in its plug-in explorer.

---

Update: For simple path tweening, Grape Animation Library seems great too!