In the last article we introduced the basics of the Cocos2d framework. This article will demonstrate how to use animation and sprites in a Cocos2d application.

Getting Started:

Our first task is to setup a background for our application. The applications with a nice background is considered more polished application. The background that we have created is for a portrait mode and not for the landscape mode. So, first we must switch the application orientation to the portrait mode. Open the  HelloWorldCocos2dAppDelegate.m file and change the orientation to portrait using the implementation below:



Another thing you will notice is that when you the application runs it displays the FPS information on the screen. You can turn it off using the following code in the HelloWorldCocos2dAppDelegate.m file.



The following code sets up the background for the application.



In the above code we have initialized the sprite with a .png file and then added it to the scene. Run the simulator and you will see the following output:



The background image did not completely fill the iPhone screen. In order to do that we must change the implementation to the following:



The above code sets the anchorPoint to the the origin (bottom left corner of the screen). This ensures that the image is displayed correctly as shown in the screenshot below:



In the next section we will demonstrate how to add the sprite to the scene and
animate the sprite.

Adding and Animating the Sprite:

For a sprite we will use an alphabet bubble which will move inside the screen. You can create any graphic you want and use it as a sprite. The following code shows how to add the sprite to the scene:



The winSize method returns the CGSize which represents the size of the screen. This is very usefull for placing the sprites at a particular position of the screen. In the above code we are placing the sprite at the center of the screen by dividing the width and height in half.

The result is shown in the screenshot below:



Now, that we have placed a sprite on the screen we need to animate it. Animation is performed by Cocos2d Action commands. There are several different actions provided by the Cocos2d framework. In this article we are going to use couple of them. The implementation below shows:



The last line make use of the runAction method to start the animation. There are varius action types that can be used. In the above example we are using CCMoveTo which means that the sprite will move to a specified position. The position is specified using the ccp method which represents Cocos2d Point.

Run the application and you will notice that the bubble moves from the center of the screen to the bottom left corner of the screen. You can control the timing of the animation by using the actionWithDuration attribute in the CCMoveTo method.

Another great action is RotateBy which is used to rotate the sprites.



If you want to execute number of actions one after the other you can use the CCSequence as shown below:



CCSequence takes in a list of actions. Remember that the action first declared in the list is the first action to be executed.

Sometimes we want several actions to be executed concurrently. This can easily be
achieved by CCSpawn class. Check out the implement below:



Conclusion:

In this article we learned how to get started with animation using libraries in Cocos2d library. Cocos2d provides excellent support in quickly building games. In the next article we will explore other aspects of the Cocos2d library.