Cocos2d: Moving a sprite with velocity, speed & direction

So I’m currently trying to understand some interesting functions in cocos2d like:

  • CGPointMake = Create a CGPoint (x,y)
  • ccpAdd = Add a CGPoint to another (x1+x2, y1+y2)
  • ccp = An alias of CGPointMake, but saves you some typing…🙂

First, lets create a sprite in the middle of the screen:

screenSize = [[CCDirector sharedDirector] winSize];
enemySprite = [CCSprite spriteWithFile:@"ship.png"];
enemySprite.position = CGPointMake(screenSize.width/2, screenSize.height/2);
[self addChild:enemySprite];

Now to make it move straight in a direction, I create a velocity like one of these:

CGPoint velocity = CGPointMake(0, 1); // Move up
CGPoint velocity = CGPointMake(0, -1); // Move down
CGPoint velocity = CGPointMake(1, 0); // Move right
CGPoint velocity = CGPointMake(-1, 0); // Move left

Then I can add the velocity to the position of the sprite like this:

enemySprite.position = ccpAdd(enemySprite.position, velocity);

I can also increase the value 1 to 2, and it will move twice as fast. But this approach seems unpractical. I’d rather move it with a speed and direction. For example, 50 pixels per second, in 45 degrees. So how to do this? At first, what does the above really do?

velocity is a CGPoint, which is an object with x and y coordinates. The same goes for the sprite position. So all it does is adding or subtracting x and y from the current position. Like this:

x = x + 1; // Move right
y = y +1; // Move up (Since 0,0 is in the bottom left corner)

To make a direction out of this, we have to do some math. To get the velocity in x, we do cos(angle*speed). The same thing goes for velocity y, but sin(angle*speed). But since cocos2d wants angles in radians, not degrees, we use this formula:

angle in radians = angle in degrees * PI / 180

Now lets create the direction as a CGPoint, using the alias ccp:

float angle = 45;
float speed = 50/60; // Move 50 pixels in 60 frames (1 second)

float vx = cos(angle * M_PI / 180) * speed;
float vy = sin(angle * M_PI / 180) * speed;

direction = ccp(vx,vy);

Now we got the direction as a CGPoint, instead of velocity, we can move it like this:

enemySprite.position = ccpAdd(enemySprite.position, direction);

And to wrap it up, we can also set the rotation of the sprite the same as the angle, and it will point in the right direction:

enemySprite.rotation = angle;

So this is how you move a sprite using angle and rotation. I hope this helped someone out there!🙂

BTW: If anyone knows how to get a better layout and bigger spaces on, let me know. I think it’s kinda hard to read with weird spaces between code and text…😛

This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

9 Responses to Cocos2d: Moving a sprite with velocity, speed & direction

  1. Mark says:

    Many thanks for this nice and simple explanation!

  2. Thanks for the tip!

    regards to formatting code, this wordpress plugin might help..

    • Niclas says:

      Thanks Christian! I’m running wordpress hosted blog, so I can’t install plugins. But i’ll consider moving to a hosted solution in the future. Good luck with your games!🙂

  3. siva says:

    hai, I am struggling with a sprite rotate around a wheel which was rotating as well.I can rotate the wheel.I cant rotate sprite with the wheel.can u please help me.

  4. Pingback: Making Sprites for the iPhone in Xcode? (Not the Soda)? | iPhone Dev Secrets

  5. Vinod says:

    nice tutorial, thanks Niclas

  6. Mark says:

    Thank you sir this helped me greatly!

  7. Vish says:

    Thanks you Niclas!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s