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:

1enemySprite.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 WordPress.com, let me know. I think it’s kinda hard to read with weird spaces between code and text…