Анимация делает игры более реалистичными, а движения добавляют оживления в игру. В этой статье мы рассмотрим библиотеку cocos2d, и то, как она поддерживает программную анимацию в играх для iPhone.

Эта статья — одна из серии статей, которые рассказывают о том, как создавать игры для iPhone на примере игры под названием ”Семь мостов”. Чтобы вспомнить о чем идет речь, прочитайте еще раз первую статью из серии, которая называется “Проектирование игр для iPhone” и посмотрите исходный код в Seven Bridges GitHub.

Эта статья познакомит вас с основами анимации. Мы рассмотрим действия в cocos2d, а также узнаем, как объединить их для создания сложных эффектов.

Простые действия

Все основные строительные блоки в cocos2d, такие как изображения и слои, являются производными от CCNode. Узлы взаимодействуют с действиями, которые выходят  в CCAction для создания движения на экране.

Основные действия cocos2d могут:

• прятать и показывать,
• отображать зеркально  и возвращать в исходную позицию,
• обесцвечивать и изменять тон,
• И многое другое.

Мы начнем с простого действия CCBlink. В игре “Семь мостов” не используются мгновенные действия, но они одни из самых простых для понимания и выполнения.

Прежде чем мы сможем начать использовать любое действие, нам нужен узел. Мы начнем с PlayerNode из нашего примера.

Игровой узел очень прост по своей сути. Он показывает игровой спрайт, обрабатывает движения и анимацию игрока по экрану. PlayerNode фактически не относится к CCNode, но содержит CCSprite, который представляет собой единый образ и распространяет CCNode. Отделение игрового объекта от фактического изображения игрока, делает игровой объект более гибким и пластичным.

Нашему игровому узлу нужны цвета и LayerManager. LayerManager — это вспомогательный объект игры “Семь мостов”, который позволяет игровому узлу взаимодействовать с окружающим игровым миром. Вам не нужно писать код для объектов с LayerManager, но у вас есть возможность добавить стандартный код.

Давайте создадим нового игрока и поместим его на экран.

 PlayerNode* player = [[PlayerNode alloc] initWithColor:cBlack layerMgr:_layerMgr]; player.player.position = ccp(100, 100); 

PlayerNode предлагает указатель спрайта и использует LayerManager, чтобы добавить спрайт на экран. Это делает спрайт доступным, как свойство с именем player, и свойство с именем position. Полный код для создания LayerManager в LevelLayer.

Мерцающие действия могут выполняться непосредственно на игровом спрайте, потому что спрайты являются CCNode объектами, которые реализуют runAction метод. Вот как это работает:

 CCBlink* blink = [CCBlink actionWithDuration:10 blinks:5]; [player.player runAction:blink]; 

Большинство действий определяет статический actionWithDuration метод, который создает новый объект действия. CCBlink принимает продолжительность и количество раз, которое он должен мигать. Мы можем применить любые действия, которые мы только захотим для этого узла только путем передачи на runAction.

Запуск нескольких действий

В последней версии игры “Семь мостов” появляются телепорты. Когда игроки пользуются телепортом, это выглядит так, как — будто они в него прыгают.  Чтобы создать этот эффект, мы объединим три действия: rotate, fade и scale. Каждое из этих действий по отдельности занимает немного времени, но мы сделаем так, чтобы они работали одновременно. Соедините все три действия вмести и вы увидите, как игрок вращается и исчезает в телепорте, как-будто он уменьшается в размере (опять же, см. LevelLayer.mm).

 [player.player runAction:[CCRotateBy actionWithDuration:0.5 angle:360]]; [player.player runAction:[CCFadeTo actionWithDuration:0.5 opacity:0.0]]; [player.player runAction:[CCScaleTo actionWithDuration:0.5 scale:0.25]]; 

CCRotateBy заставляет игрока вращаться на указанное число градусов. Мы хотим, чтобы он вращался полый круг, то есть триста шестьдесят градусов.

CCFadeTo изменяет непрозрачность игрока на указанное значение. Мы хотим, чтобы игрок полностью исчез, поэтому мы выставляем значение на 0.0.

CCScaleTo увеличивает или сокращает размер игрока в соответствии с заданным коэффициентом масштабирования. Мы хотим, чтобы игрок уменьшился в размере, попадая в телепорт, поэтому мы уменьшаем его размер до одной четверти от изначального.

Продолжительность этих действий равна CCBlink. При указании продолжительности для каждого действия, мы указываем, что все три должны начаться одновременно. Результат выглядит следующим образом:

Игра “Семь мостов” – прыжок в телепорт от Зака Гросбарта на Vimeo.

Объединение действий в последовательность

Вращение и выцветание — это здорово, но давайте рассмотрим изменение размеров спрайта. В нашем примере есть карта “Дома и цвета”, на которой представлены дома, которые игрок может посетить. Когда игрок заходит в него, дом становится серым.

Дома появляются благодаря объекту, похожему на PlayerNode, под названием HouseNode. Каждый из этих объектов является вспомогательным, который содержит спрайт. PlayerNode предоставляет игроку спрайт в свойстве с именем player, и HouseNode предоставляет спрайт дома в свойстве с именем house.

При посещении игроком дома, он переворачивается в горизонтальную позицию, благодаря анимируемому действию. Чтобы перевернуть дом в исходную позицию,  мы запускаем сразу два действия последовательно. Первое действие переворачивает дом направо. Второе действие переворачивает его обратно влево.

В предыдущем примере к игроку применялись одновременно три действия: вращение, уменьшение в размере, исчезновение. Для дома нам нужно использовать большое количество действий. Для этого мы будем использовать новый объект с именем CCSequence. Который объединит три действия, выполняемые один за одним.

Мы начнем с создания наших действий (HouseNode.mm) :

 float scale = 1.0; CCEaseExponentialIn* flipHalf = [CCEaseExponentialIn actionWithAction:[CCActionTween actionWithDuration:0.25 key:@"scaleX" from:-scale to:0.0]]; CCEaseExponentialOut* flipRemainingHalf = [CCEaseExponentialOut actionWithAction:[CCActionTween actionWithDuration:0.25 key:@"scaleX" from:0.0 to:scale]]; 

Cocos2d предоставляет ряд специальных действий, которые делают возможным построение промежуточных изображений. Все они являются производными от CCEase. Эти действия обеспечивают простой доступ к некоторым из основных анимационных движений, с помощью которых объекты естественно переходят друг в друга, как слайды. Эти же методы используются в сети для анимации  JavaScript.

CCEaseExponentialIn и CCEaseExponentialOut обеспечивают естественное движение в и из различных позиций, используя экспоненциальную кривую. Эта анимация включает в себя и CCTween, который может изменить любое свойство узла. Мы изменяем scaleX свойство, чтобы начать переворот.

Здесь очень много математики, но основные понятия просты для понимания. Благодаря пер …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров