Основы разработки игр для iPhone с использованием Cocos2D

Привет, Хабражитель!

Многие люди мечтают научиться писать программы, игры, но не получается по многим причинам. Я, изначально, не хотел ничего писать потому что не было интересной платформы, и я был еще слишком маленьким. Потом все изменилось. Наступила новая эра в телефонной индустрии – появился iPhone. Я сразу, как о нем услышал, загорелся желанием его приобрести. Платформа сразу понравилась, кнопок и стилуса нет – самое то для игр.
Программы я начал писать в ноябре 2009, если их можно назвать программами :). Многие спрашивают как я учился – на видео-уроках с YouTube, а как еще? Читать непонятные уроки по iPhone SDK? В тот момент я загорелся идеей учить таких же как я – начал записывать видео на YouTube новым для меня темам.
Если интересно: http://bit.ly/pdyoutube. Потом все пошло и поехало, сам стал лучше программировать и запоминалось все намного лучше. Не буду писать очень длинное вступление – перейдем к самому интересному.

Всегда хотел делать игры, но на пустом Xcode не очень удобно и понятно. Стал выбирать платформу (фреймворк) для разработки игр под iPhone, iPad. Мой выбор остановился на Cocos2D. Многие спросят почему – он очень простой в использовании, очень! Он еще и бесплатный и часто обновляемый!

Если у вас он еще не стоит – его стоит установить. Делается это все очень просто. Заходите на http://bit.ly/cocos2dsite, скачиваете из Downloads, распаковываете. Текущая версия – 1.0 rc-3. Хоть там написано что она не стабильная – она вполне сойдет для разработки. Она достаточно стабильная.

После распаковки у вас получится папка с названием «cocos2d-iphone-1.0.0-rc3».

Открываете Терминал, вводите cd.



Нажимаете пробел и натаскиваете папку на Терминал. Должно появится расположение вашей папки на жестком диске.



Нажимаете Enter и вводите “./install-templates.sh –u –f”. Потом нажмите Enter еще раз.




Польются строчки слов и через примерно 20 сек должно появиться done! Если появилось – вы все сделали правильно!



Дальше Терминал нам больше не понадобится, можете его закрывать. Теперь пришло время открывать Xcode. Я рекомендую Xcode 4. Он удобен в использовании и достаточно стабилен. Вы можете его купить в Mac AppStore или скачать с developer.apple.com, если вы оплатили программу iPhone или Mac разработчика.
При открытии Xcode поприветствует нас.



Он вас должен спросить хотите-ли вы проставить на ваш Mac документацию. Дело ваше, но я согласился. Справа вы увидите выбор список последних проектов, слева – «Создать новый проект», «Подсоединиться к репозиторию», «Узнайте больше об Xcode 4», ссылка на developer.apple.com.

Мы выбираем “Create New Project”.



В “Создать новый проект” вы можете выбрать iPhone или Mac. Я выберу cocos2d в iPhone.

Выбираете “cocos2d” и нажимайте Next.



Там вы можете выбрать название, и “Company Identifier”. Я назову проект Hello World.

Дальше он предложит сохранить, вам остается только выбрать место для сохранения.

После сохранения должен открыться Xcode. Выглядеть будет примерно так:



Давайте соберем проект и посмотрим что там у нас. Это делается нажатием на кнопку “Run”. Первый раз будет компилироваться долго, все зависит от мощности вашей машины.



Должа появиться надпись Hello World на экране iPhone.



Если вы хотите разрабатывать под iPad, тогда поменяйте iPhone на iPad и надпись будет красоваться на вашем iPad.



Чтобы устанавливать на устройства вам надо купить сертификат разработчика у Apple.

Проект уже есть, теперь только осталось воплотить ваши идеи в реальность.

Не волнуйтесь, это не все!
Теперь я вам покажу как добавлять картинки и делать с ними разные действия.

Самый простой способ – Google, но большинство картинок защищено авторскими правами и у вас нет прав их использовать. Я буду использовать свои.

Возьму картинки из моей старой игры – Iceberg Alert. Буду использовать 3 айсберга и кораблик. Картинки в двух разрешениях (iPhone и iPhone 4). У картинок для Retina в cocos2d должен быть такой формат названия: “name-hd.yourformat”. У картинок для обычного разрешения – “name.yourformat”.
Вот скриншот для наглядности.



Теперь я добавлю эти файлы в проект и сохраню в папку проекта.

Пришло время приступить к работе с кодом.

В HelloWorldLayer.m удалите 8 строчек, относящихся к CCLabel. После удаления у вас должно все выглядеть вот так:

P

Пришло время добавлять наши картинки в будущую игру. Картинки являются CCSprite. Все то, что находится в init будет создано при инициализации того слоя (экрана).
Для начала добавлю первый спрайт. Это делается 3-мя строчками кода. Код пишется в место, где был раньше код для надписи “Hello World”.

Код:

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

Первой строчкой мы добавляем наш CCSprite в память устройства, чтобы его потом можно было свободно добавлять. Название должно быть без суффикса –hd. Cocos2D сам будет находить -hd изображение в программе.
Вторая строчка указывает координату нашей картинки. В моем случае это – 100 по х и 100 по y. Если не указать позицию, то наш спрайт окажется в левом нижнем углу экрана.
Третья строчка добавляет спрайт в наш слой.
Если последнюю строчку не написать, то ничего не появится.

Если вы соберете проект у вас получится что-то похожее на это:



Аналогично добавляем и другие картинки. Вот как это должно выглядеть:



Чтобы все поместилось мне пришлось изменить координаты первого спрайтика.

Вот код добавления всех спрайтов, показанных на прошлой картинке:

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];

Ну у нас стоят картинки – что теперь делать? Я теперь вам покажу как ими управлять с помощью действий (CCAction).
В кокосе есть много действий, я вам покажу как использовать некоторые из них.

Более подробно о действиях написано в программе для SDK Tutorials Cocos2D (iPad): http://bit.ly/sdkcocos2d

Я вам покажу как двигать спрайт в определенную точку, как крутить, как
делать его прозрачным, как увеличивать до определенного,
размера.

Для начала я расставлю спрайты по разным углам.

Код:

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];

Должно выглядеть примерно так.



Теперь приступим к делу.

Начнем с самого левого спрайта. Его мы будем двигать вверх. Для этого у нас есть действие под названием CCMoveTo и вот как его использовать.

Код:

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

Добавляем его под кодом добавления спрайтов. Вот как должно все выглядеть:



Что этот код означает?

1) iceberg1 — название нашего первого спрайта, на котором мы будем выполнять действие
2) runAction: — выполнить действие
3) CCMoveTo – название действия
4) actionWithDuration:5.0f position:ccp(iceberg1.position.x,280) – действие длиной 5 секунд, позиция.

С первым действием разобрались.
Теперь начнем исполнять действие на втором спрайте. Его мы будем крутить.
Для этого есть действие под названием CCRotateBy.

Код:

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

Первая часть должна быть понятна, поэтому я вам объясню что делает вторая часть.
actionWithDuration:5.0f angle:360 – действие длиной 5 секунд, угол 360 градусов. Вот как это должно выглядеть на экране iPhone. Как вы видите, второй спрайт крутится.

Pic19

Все работает. Пришло время третьего спрайта. Его мы будем запрозрачнивать.
Для этого я буду использовать действие CCFadeTo.
Код:
[iceberg3 runAction:[CCFadeTo actionWithDuration:5.0f opacity:0]];
Все должно быть понятно. Последняя часть означает что действие длится 5 секунд, упрозрачневается до 0 (полностью).
В течение 5-ти секунд спрайт должен быть прозрачным.

Пришло время четвертого спрайта – корабля. Его мы будем увеличивать.
Для этого есть действие CCScale.
Код:
[ship runAction:[CCScaleTo actionWithDuration:5.0f scale:2.0]];

Код должен быть ясен. Увеличиваем спрайт в 2 раза.

Надеюсь вам понравилось и вы не заснули во время чтения.

Все должно выглядеть примерно так:

Ссылки:

Ссылка на проект без картинок: Link
Сайт Cocos2d: Link .