How to make sprite move in a sinusoidal in cocos2d?

Question

I have a sprite (paper plane, for example). I'd like make it move like in the picture below. I can use lots of MoveTo and RotateBy actions to define the path by points, but it seems a bad idea to me. How can it be implemented ?

Answer 1

I thought it might be good to post an answer that showed the basics of how the update would work if you had explicit control over the sprite.

I was not sure if you were using Cocos2d or Cocos2d-X, but the technique applies in either case. The code is in C++ using Cocos2d-x.

The idea is that, based on time, you (manually) update the position of the sprite. The position of the sprite at any time is determined by the number of seconds since the animation begun. The line nominally follows a straight path from (x0,y0) to (x1,y0). You can then project the line onto a line drawn at any angle using some trigonometry. This gives the ability to have a sinusoidal path along any direction.

Here is the basic code (the main work is done in UpdateAnimation()):

// This assumes the frame rate is relatively constant
// at 60 fps.
const double SECONDS_PER_TICK = 1.0/60;
const double DURATION = 8.0;     // Seconds for total animation.
const double X_START = 100;      // Pixels
const double Y_START = 200;      // Pixels
const double X_STOP = 800;      // Pixels
const double X_SPEED = (X_STOP-X_START)/DURATION;
const double Y_PERIOD = 4.0;     // Seconds for y cycle.
const double Y_HEIGHT = 100;
const double LAUNCH_ANGLE = M_PI/4; // Angle for line.
const CCPoint ANCHOR(X_START,Y_START);

CCPoint RotatePointAboutAnchor(const CCPoint& pt,double theta,const CCPoint& anchor)
{
   double xPrime = cos(theta) * (pt.x-anchor.x) - sin(theta) * (pt.y-anchor.y) + anchor.x;
   double yPrime = sin(theta) * (pt.x-anchor.x) + cos(theta) * (pt.y-anchor.y) + anchor.y;

   return CCPoint(xPrime,yPrime);
}


void HelloWorld::InitAnimation()
{
   _ticks = 0;
   _ticksTotal = DURATION/SECONDS_PER_TICK;
}

void HelloWorld::UpdateAnimation()
{
   if(_ticks <= _ticksTotal)
   {
      double seconds = _ticks*SECONDS_PER_TICK;
      double xPos = X_START + seconds*X_SPEED;
      double yPos = Y_START + Y_HEIGHT*sin(seconds*2*M_PI/Y_PERIOD);
      CCPoint pos = RotatePointAboutAnchor(CCPoint(xPos,yPos), LAUNCH_ANGLE, ANCHOR);
      // Set the position of the sprite
      _sprite->setPosition(pos);

      CCLOG("Tick: %d, Seconds: %5.2f, Position: (%f,%f)",_ticks,seconds,pos.x,pos.y);
      if(_ticks%10 == 0)
      {  // Add a trail
         CCSprite* marker = CCSprite::create("Icon-72.png");
         marker->setScale(0.1);
         marker->setPosition(_sprite->getPosition());
         marker->setZOrder(50);
         addChild(marker);
      }
      // Increment the ticks count for next time.
      _ticks++;
   }
}

void HelloWorld::draw()
{
   CCLayer::draw();
   CCPoint start;
   CCPoint stop;

   start = RotatePointAboutAnchor(CCPoint(X_START,Y_START), LAUNCH_ANGLE, ANCHOR);
   stop = RotatePointAboutAnchor(CCPoint(X_STOP,Y_START), LAUNCH_ANGLE, ANCHOR);
   ccDrawLine(start,stop);

   start = RotatePointAboutAnchor(CCPoint(X_START,Y_START+Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
   stop = RotatePointAboutAnchor(CCPoint(X_STOP,Y_START+Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
   ccDrawLine(start,stop);

   start = RotatePointAboutAnchor(CCPoint(X_START,Y_START-Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
   stop = RotatePointAboutAnchor(CCPoint(X_STOP,Y_START-Y_HEIGHT), LAUNCH_ANGLE, ANCHOR);
   ccDrawLine(start,stop);
}

void HelloWorld::onEnterTransitionDidFinish()
{
   InitAnimation();
   scheduleUpdate();
}

void HelloWorld::onExitTransitionDidStart()
{
   unscheduleUpdate();
}

void HelloWorld::update(float dt)
{
   UpdateAnimation();
}

I drew some markers to show the path and also drew the lines "around" the path that should be followed. Here is what it looks like:

You can change the LAUNCH_ANGLE as you like to make it move along different angles.

Obviously this is not production code, but it does demonstrate the idea that you can follow a sinusoidal path in any direction. You should encapsulate it into something more in line with your application.

The entire code base is available on git hub.

And there are more posts about stuff like this in this blog.