Revolve FlxSprites Around a Central FlxSprite in Flash Game made with Flixel

Question

I have been working on a Flash game made in Flash Builder using the Flixel library. I have been trying to dynamically create a group of FlxSprites , and revolve them around a player controlled class that extends FlxSprite when the player uses a power up.

My thought on how to approach this, was to create a circle, use points on that circle to instantiate the sprites, and then somehow update those sprites to points along that circle during the game's update step. But I am not sure what would be the best way to hold information about a circle, or circular path's in ActionScript 3. I assumed that As3Math provided some of the means to do this, and I tried to add one sprite to a circle like this:

package
{
    import As3Math.*;
    import As3Math.geo2d.amBoundCircle2d;
    import org.flixel.FlxGroup;
    import org.flixel.FlxState;

    public class ButterflyRing extends FlxGroup
    {
        [Embed(source="../Content/Images/spritesheet_butterfly_32x8.png")] var butterflySprite:Class;
        public function ButterflyRing(playState:FlxState,X:Number,Y:Number)
        {
            //add to super class
            super();

            //create a circle motion path at coordinates x:150, y:150 with a radius of 100
            var butterflyCircle:Math.amBoundCircle2d = new Math.amBoundCircle2d(150,50);

            var circDiameter:Number = butterflyCircle.radius/2;
            var pX:Number = butterflyCircle.center.x + circDiameter
            var pY:Number = butterflyCircle.center.y;

            var butterfly:SpriteButterfly = new SpriteButterfly(pX,pY);
            add(butterfly);


        }

        override public function update():void
        {
            super.update();
        }
    }
}

I realize now this is not the correct way to use As3Math, that it is accessible by default and you call it like Math.pi. My question is, Does ActionsScript 3 have the means to do this in its code base, or do you have to define your own classes to hold information for a circle, or do you use Math.pi to build circles from scratch? What is a good approach for this? Or does Flixel provide something good for this?

Answer 1

I looked at what I think is the AS3Math lib you're talking about. Here is their amCircle2d class.

It doesn't look terribly useful, since it inherits from (amCurve2d)[https://code.google.com/p/as3math/source/browse/trunk/src/As3Math/geo2d/amCurve2d.as] but doesn't implement getPointAtDist, which, if you fed it a distance a long the circumference of the circle, should theoretically gives you points rotating around the circle's center.

An important concept to understand in order to accomplish this is how trigonometry is related to 2D vectors, and how sine and cosine are related to what's called the "unit circle."

This page has a couple of good gifs showing that relationship.

What those gifs show, is that assuming you have a circle with radius r centered at point (px, py), and an angle t specifying how far around the circle you want to go, the following is true:

xcoord_along_circle = r * cos(t) + px
ycoord_along_circle = r * sin(t) + py

It's likely that the as3 Math class's sin/cos functions work in radians, so wrap the range to 0..2*Math.pi.

Another approach is to think of it in terms of physics and orbiting bodies: Uniform Circular Motion (you may have studied centripetal force in high school physics). This page has a nice thorough explanation.

The general idea is that you have a velocity that is parallel to the vector running from your orbiting point to the origin. Then, every step, this velocity is accelerated by a force perpendicular to that velocity (that is, it is the force going from your orbiting point to the origin);

Roughly, in pseudocode:

//Init
float fixedFPS = 60.0;
float constantDeltaTime = 1 / fixedFPS;
float radius = 10.0;
Vector2 point = origin + Vector2.UnitX * radius;
Vector2 velocity = origin.y + Vector2.UnitY * radius;

//Every update
velocity += (origin - point) * constantDeltaTime;
point += velocity * constantDeltaTime;

I threw together a ProcessingJS example to play with.