Cocos2D iPhone Game Development Basics

Hello, habrazhitel!

Many people dream of learning how to write programs, games, but they fail for many reasons. I initially did not want to write anything because there was no interesting platform, and I was still too small. Then everything changed. A new era has come in the telephone industry - the iPhone has appeared. I immediately, as I heard about him, had a burning desire to purchase it. I immediately liked the platform, there are no buttons and a stylus - the most for games.
I started writing programs in November 2009, if they can be called programs :). Many people ask how I studied - on video lessons from YouTube, but how else? Read obscure lessons on the iPhone SDK? At that moment I was excited to teach people like me — I started recording videos on YouTube with new topics for me.
If interested: http://bit.ly/pdyoutube . Then everything went and went, he began to program better and everything was remembered much better. I will not write a very long introduction - let's move on to the most interesting.

I always wanted to make games, but on empty Xcode it's not very convenient and clear. Began to choose a platform (framework) for developing games for iPhone, iPad. My choice was Cocos2D. Many will ask why - it is very easy to use, very! It is also free and frequently updated!
')
If you don’t have it, you should install it. This is all done very simply. Go to http://bit.ly/cocos2dsite , download from Downloads, unpack. The current version is 1.0 rc-3. Although it says that it is not stable, it will be fine for development. It is fairly stable.

After unpacking, you’ll have a folder called “cocos2d-iphone-1.0.0-rc3”.

Open the Terminal, enter cd.



Press the spacebar and drag the folder to the Terminal. Your folder location should appear on your hard disk.



Press Enter and enter “./install-templates.sh –u –f”. Then press Enter again.




Lines of words will be poured, and after about 20 seconds, done should appear! If it appeared, you did everything right!



Then we don’t need the Terminal anymore, you can close it. Now it's time to open Xcode. I recommend Xcode 4. It is easy to use and quite stable. You can buy it in the Mac AppStore or download from developer.apple.com if you paid for an iPhone program or a Mac developer.
Opening Xcode will greet us.



He should ask you if you want to put documentation on your Mac. Your case, but I agreed. On the right, you will see a selection of recent projects, on the left, “Create a new project”, “Connect to the repository”, “Learn more about Xcode 4”, link to developer.apple.com.

We select “Create New Project”.



In “Create a new project” you can choose an iPhone or Mac. I will choose cocos2d in the iPhone.

Choose “cocos2d” and click Next.



There you can choose a name, and “Company Identifier”. I will name the project Hello World.

Then he will offer to save, you just have to choose a place to save.

After saving, Xcode should open. It will look something like this:



Let's put together a project and see what we have there. This is done by clicking on the “Run” button. The first time will be compiled for a long time, it all depends on the power of your machine.



Hello World should appear on the iPhone screen.



If you want to develop for iPad, then change the iPhone to iPad and the inscription will show off on your iPad.



To install on devices you need to buy a developer certificate from Apple.

The project is already there, now it only remains to translate your ideas into reality.

Do not worry, this is not all!
Now I will show you how to add pictures and do different actions with them.

The easiest way is Google, but most of the images are copyrighted and you are not authorized to use them. I will use my own.

Take pictures from my old game - Iceberg Alert. I will use 3 iceberg and ship. Pictures in two resolutions (iPhone and iPhone 4). Pictures for Retina in cocos2d should have the following name format: “name-hd.yourformat”. In pictures for normal resolution - “name.yourformat”.
Here is a screenshot for clarity.



Now I will add these files to the project and save to the project folder.

It's time to get started with the code.

In HelloWorldLayer.m, delete 8 lines related to CCLabel. After deleting, you should have everything look like this:

P

It's time to add our pictures to the future game. Pictures are CCSprite. Everything that is in init will be created when initializing that layer (screen).
First, add the first sprite. This is done with 3 lines of code. The code is written to the place where the code for the inscription “Hello World” used to be.

Code:

CCSprite *iceberg1 = [CCSprite spriteWithFile:@"iceberg1.png"];
iceberg1.position = ccp(100,100);
[self addChild:iceberg1];

The first line we add our CCSprite to the device’s memory so that it can be added later. The name must be without the suffix –hd. Cocos2D will find the -hd image in the program itself.
The second line indicates the coordinate of our image. In my case, this is 100 x and 100 y. If you do not specify the position, then our sprite will be in the lower left corner of the screen.
The third line adds a sprite to our layer.
If the last line is not written, then nothing will appear.

If you build a project, you get something like this:



Similarly, add other pictures. Here’s how it should look:



To fit everything I had to change the coordinates of the first spritic.

Here is the code to add all the sprites shown in the previous image:

CCSprite *iceberg1 = [CCSprite spriteWithFile:@"iceberg1.png"];
iceberg1.position = ccp(40,100);
[self addChild:iceberg1];

CCSprite *iceberg2 = [CCSprite spriteWithFile:@"iceberg2.png"];
iceberg2.position = ccp(110,100);
[self addChild:iceberg2];

CCSprite *iceberg3 = [CCSprite spriteWithFile:@"iceberg3.png"];
iceberg3.position = ccp(180,100);
[self addChild:iceberg3];

CCSprite *ship = [CCSprite spriteWithFile:@"ship.png"];
ship.position = ccp(270,100);
[self addChild:ship];

Well, we have pictures - what to do now? I will now show you how to manage them using actions (CCAction).
There are many activities in the coconut, I will show you how to use some of them.

For more information about the actions written in the program for the SDK Tutorials Cocos2D (iPad): http://bit.ly/sdkcocos2d

I'll show you how to move the sprite to a certain point, how to twist, how to
make it transparent, how to increase to a certain,
size.

First, I will place the sprites in different corners.

Code:

CCSprite *iceberg1 = [CCSprite spriteWithFile:@"iceberg1.png"];
iceberg1.position = ccp(40,100);
[self addChild:iceberg1];

CCSprite *iceberg2 = [CCSprite spriteWithFile:@"iceberg2.png"];
iceberg2.position = ccp(150,250);
[self addChild:iceberg2];

CCSprite *iceberg3 = [CCSprite spriteWithFile:@"iceberg3.png"];
iceberg3.position = ccp(250,100);
[self addChild:iceberg3];

CCSprite *ship = [CCSprite spriteWithFile:@"ship.png"];
ship.position = ccp(400,250);
[self addChild:ship];

It should look something like this.



Now let's get down to business.

Let's start with the leftmost sprite. We will move it up. For this, we have an action called CCMoveTo and here's how to use it.

Code:

[iceberg1 runAction:[CCMoveTo actionWithDuration:5.0f position:ccp(iceberg1.position.x,280)]];

Add it under the code add sprites. This is how it should look:



What does this code mean?

1) iceberg1 - the name of our first sprite on which we will perform the action
2) runAction: - perform an action
3) CCMoveTo - action name
4) a ctionWithDuration:5.0f position:ccp(iceberg1.position.x,280) - action 5 seconds long, position.

With the first action sorted out.
Now let's start performing the action on the second sprite. We will twist it.
To do this, there is an action called CCRotateBy.

Code:

[iceberg2 runAction:[CCRotateBy actionWithDuration:5.0f angle:360]];

The first part should be clear, so I will explain to you what the second part is doing.
actionWithDuration:5.0f angle:360 - action 5 seconds long, angle of 360 degrees. Here is how it should look on the iPhone screen. As you can see, the second sprite is spinning.

Pic19

Everything is working. It's time for the third sprite. We will translucent it.
For this, I will use the CCFadeTo action.
Code:
[iceberg3 runAction:[CCFadeTo actionWithDuration:5.0f opacity:0]];
Everything should be clear. The last part means that the action lasts 5 seconds, it becomes transparent to 0 (completely).
Within 5 seconds, the sprite should be transparent.

It's time for the fourth sprite - the ship. We will increase it.
For this there is an action CCScale.
Code:
[ship runAction:[CCScaleTo actionWithDuration:5.0f scale:2.0]];

The code should be clear. We increase the sprite 2 times.

I hope you enjoyed it and you did not fall asleep while reading.

It should look something like this:



References:

Link to the project without pictures: Link
Cocos2d website: Link .