The goal of this article is to learn how to work with sprites and get to know their main properties. After reading this article, you will be able to add sprites to your games.
In this article, we will cover the following topics:
- Setting up the initial project
- Sprites and their main properties
- Adding sprites to the scene
- Adding sprites as a child node of another sprite
- Manipulating sprites (moving, flipping, and so on)
- Performance considerations when working with many sprites
- Creating spritesheets and using the sprite batch node to optimize performance
- Using basic animation
Creating the game project
We could create many separate mini projects, each demonstrating a single Cocos2D aspect, but this way we won’t learn how to make a complete game. Instead, we’re going to create a game that will demonstrate every aspect of Cocos2D that we learn.
The game we’re going to make will be about hunting. Not that I’m a fan of hunting, but taking into account the material we need to cover and practically use in the game’s code, a hunting game looks like the perfect candidate.
The following is a screenshot from the game we’re going to develop. It will have several levels demonstrating several different aspects of Cocos2D in action:
Time for action – creating the Cocohunt Xcode project
Let’s start creating this game by creating a new Xcode project using the Cocos2D template, just as we did with HelloWorld project, using the following steps:
- Start Xcode and navigate to File | New | Project… to open the project creation dialog.
- Navigate to the iOS | cocos2d v3.x category on the left of the screen and select the cocos2d iOS template on the right. Click on the Next button.
- In the next dialog, fill out the form as follows:
- Product Name: Cocohunt
- Organization Name: Packt Publishing
- Company Identifier: com.packtpub
- Device Family: iPhone
- Click on the Next button and pick a folder where you’d like to save this project. Then, click on the Create button.
- Build and run the project to make sure that everything works. After running the project, you should see the already familiar Hello World screen, so we won’t show it here.
Make sure that you select the correct simulator version to use. This project will support iPhone, iPhone Retina (3.5-inch), iPhone Retina (4-inch), and iPhone Retina (4-inch, 64-bit) simulators, or an actual iPhone 3GS or newer device running iOS 5.0 or higher.
What just happened?
Now, we have a project that we’ll be working on.
The project creation part should be very similar to the process of creating the HelloWorld project, so let’s keep the tempo and move on.
Time for action – creating GameScene
As we’re going to work on this project for some time, let’s keep everything clean and tidy by performing the following steps:
- First of all, let’s remove the following files as we won’t need them:
- HelloWorldScene.h
- HelloWorldScene.m
- IntroScene.h
- IntroScene.m
- We’ll use groups to separate our classes. This will allow us to keep things organized. To create a group in Xcode, you should right-click on the root project folder in Xcode, Cocohunt in our case, and select the New Group menu option (command + alt + N). Refer to the following sceenshot:
- Go ahead and create a new group and name it Scenes. After the group is created, let’s place our first scene in it.
- We’re going to create a new Objective-C class called GameScene and make it a subclass of CCScene. Right-click on the Scenes group that we’ve just created and select the New File option.
Right-clicking on the group and selecting New File instead of using File | New | File will place our new file in the selected group after creation.
- Select Cocoa Touch category on the left of the screen and the Objective-C class on the right. Then click on the Next button.
- In the next dialog, name the the class as GameScene and make it a subclass of the CCScene class. Then click on the Next button.
- Make sure that you’re in the Cocohunt project folder to save the file and click on the Create button.
You can create the Scenes folder while in the save dialog using New Folder button and save the GameScene class there. This way, the hierarchy of groups in Xcode will match the physical folders hierarchy on the disk. This is the way I’m going to do this so that you can easily find any file in the book’s supporting file’s projects.
However, the groups and files organization within groups will be identical, so you can always just open the Cocohunt.xcodeproj project and review the code in Xcode.
- This should create the GameScene.h and GameScene.m files in the Scenes group, as you can see in the following screenshot:
- Now, switch to the AppDelegate.m file and remove the following header imports at the top:
#import “IntroScene.h” #import “HelloWorldScene.h”
It is important to remove these #import directives or we will get errors as we removed the files they are referencing.
- Import the GameScene.h header as follows:
#import “GameScene.h”
- Then find the startScene: method and replace it with following:
-(CCScene *)startScene { return [[GameScene alloc] init]; }
- Build and run the game. After the splash screen, you should see the already familiar black screen as follows:
What just happened?
We’ve just created another project using the Cocos2D template. Most of the steps should be familiar as we have already done them in the past.
After creating the project, we removed the unneeded files generated by the Cocos2D template, just as you will do most of the time when creating a new project, since most of the time you don’t need those example scenes in your project.
We’re going to work on this project for some time and it is best to start organizing things well right away. This is why we’ve created a new group to contain our game scene files. We’ll add more groups to the project later.
As a final step, we’ve created our GameScene scene and displayed it on the screen at the start of the game. This is very similar to what we did in our HelloWorld project, so you shouldn’t have any difficulties with it.