Pull to refresh

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

Reading time 6 min
Views 28K
Привет, Хабражитель!

Многие люди мечтают научиться писать программы, игры, но не получается по многим причинам. Я, изначально, не хотел ничего писать потому что не было интересной платформы, и я был еще слишком маленьким. Потом все изменилось. Наступила новая эра в телефонной индустрии – появился 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.

image

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

image

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

image
image

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

image

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

image

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

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

image

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

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

image

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

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

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

image

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

image

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

image

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

image

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

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

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

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

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

image

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

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

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

imageP

Пришло время добавлять наши картинки в будущую игру. Картинки являются 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. Если не указать позицию, то наш спрайт окажется в левом нижнем углу экрана.
Третья строчка добавляет спрайт в наш слой.
Если последнюю строчку не написать, то ничего не появится.

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

image

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

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


Ну у нас стоят картинки – что теперь делать? Я теперь вам покажу как ими управлять с помощью действий (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];


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

image

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

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

Код:

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

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

image

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

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. Как вы видите, второй спрайт крутится.

imagePic19

Все работает. Пришло время третьего спрайта. Его мы будем запрозрачнивать.
Для этого я буду использовать действие 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 .
Tags:
Hubs:
+41
Comments 17
Comments Comments 17

Articles