• 11 минут чтения

• Мобильные, Игры, iOS, iPhone

• Поделись ТвиттерЛинкедин

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

Эта статья является частью серии, которая учит вас как создавать игры для айфона на основе игры Seven Bridges с открытым исходным кодом. Обязательно ознакомьтесь с первой статьей серии «Разработка игры для iPhone с открытым исходным кодом» и просмотрите исходный код в репозитории Seven Bridges на GitHub.

Дальнейшее чтение на SmashingMag: ссылка

• Как создать игру SpriteKit в Swift 3
• Разработка единственного в своем роде портфолио игр на основе CSS/JS
• Удобный для пальцев дизайн: идеальные размеры мобильного сенсорного экрана

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

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

Все основные строительные блоки в игре Cocos2D, такие как изображения и слои, происходят из [CCNode](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_node.html). Узлы взаимодействуют с действиями, которые расширяют [CCAction](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_action.html) для создания движения на экране.

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

• скрыть и показать,
• перевернуть и повернуть,
• тускнеть и окрашиваться,
• и многое другое.

Начнем с простого действия [CCBlink](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_blink.html). В Seven Bridges не используется действие мерцания, но это одно из самых простых действий для понимания.

Прежде чем мы сможем начать использовать какое-либо действие, нам понадобится узел. Мы начнем с [PlayerNode](https://github.com/zgrossbart/bridges/blob/master/bridges2/PlayerNode.mm) от Семи Мостов.

Узел игрока простой. Он показывает спрайт игрока, и он обрабатывает движение и анимацию игрока по экрану. PlayerNode на самом деле не CCNodeно содержит [CCSprite](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_sprite.html)который представляет одно изображение и расширяет CCNode. Отделение объекта игрока от фактического изображения игрока делает объект игрока немного более гибким.

Нашему узлу игрока нужен цвет и [LayerManager](https://github.com/zgrossbart/bridges/blob/master/bridges2/LayerMgr.mm). LayerManager — это вспомогательный объект в Seven Bridges, который позволяет игровым узлам взаимодействовать с окружающим миром. Вам не нужно кодировать свои объекты с помощью LayerManagerно это дает вам простое место для добавления стандартного кода.

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

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

PlayerNode содержит указатель спрайта и использует LayerManager чтобы добавить спрайт на сцену. Это делает спрайт доступным как свойство с именем playerу которого есть свойство с именем position. Полный код для создания LayerManager в [LevelLayer](https://github.com/zgrossbart/bridges/blob/master/bridges2/LevelLayer.mm).

Действие мерцания может выполняться непосредственно на спрайте игрока, потому что спрайты также CCNode объекты, реализующие [runAction](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_node.html#a5d6d868cc1a0ba72820a055b05661aa5) метод. Это работает следующим образом:

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

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

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

В последней версии Seven Bridges представлены телепорты, . Когда игроки сталкиваются с телепортами, они должны выглядеть так, будто прыгают в них. Чтобы создать этот эффект, мы объединим три действия: поворот, затухание и масштабирование. Выполнение каждого из этих действий занимает некоторое время, но мы можем заставить их все выполняться одновременно. Соедините их вместе, и мы увидим, как игроки вращаются и исчезают по мере их уменьшения (опять же, см. 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 поворачивает игрока из текущей позиции на указанное количество градусов. В данном случае нам нужен полный круг, поэтому мы поворачиваемся на 360 градусов.

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

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

Эти действия имеют продолжительность, как и CCBlink. Указав одинаковую продолжительность для каждого действия, мы заставляем все три из них выполняться одновременно. Воспроизведение их всех вместе выглядит так:

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

Вращение и затухание — это круто, но давайте сделаем еще один шаг вперед, фактически изменив размеры спрайта, а не только его размер. Карта «Дома и цвета» знакомит с домами, , которые вы должны посетить. Когда вы посещаете дом, мы делаем его серым с небольшим росчерком.

Дома визуализируются объектом, похожим на PlayerNodeпо имени [HouseNode](https://github.com/zgrossbart/bridges/blob/master/bridges2/HouseNode.mm). Каждый из них является вспомогательным объектом, который содержит спрайт и обрабатывает взаимодействия. PlayerNode выставляет спрайт игрока в свойстве с именем playerи HouseNode выставляет спрайт дома в свойстве с именем house.

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

Вращающийся, сжимающийся, исчезающий игрок использовал три анимации, которые запускались одновременно. Дом нуждается в большем контроле. Чтобы разделить их, мы будем использовать новый объект с именем [CCSequence](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_sequence.html). Последовательности объединяют действия, которые выполняются одно за другим.

Мы начнем с создания двух наших действий (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](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_action_ease.html). Эти действия обеспечивают простой доступ к некоторым основным анимациям движения, которые заставляют объекты подпрыгивать и скользить друг в друга с более естественным движением. Эти же методы используются в Интернете для анимации JavaScript.

CCEaseExponentialIn и CCEaseExponentialOut обеспечить естественное движение в различных положениях и из них, используя экспоненциальную кривую. Эта анимация сочетает в себе это с [CCTween](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_action_tween.html), который может применять изменения к любому свойству узла. Мы меняем scaleX свойство, чтобы начать вращение.

Еще не запутались?

Здесь много математики, но основные понятия довольно просты. Первая анимация заставляет дом уменьшаться по горизонтали вдоль оси X. Это сжимает дом вместе, пока он не исчезнет. Вторая анимация растягивает дом от нуля до полной ширины. Когда вы соединяете их вместе, кажется, что дом вращается.

Давайте создадим наш дом и запустим анимацию вместе с такой последовательностью (HouseNode.mm):

HouseNode *houseNode = [[HouseNode alloc] initWithColorAndCoins:cBlack layerMgr:layerMgr coins:0];

CCSequence* seq = [CCSequence actions:flipHalf, flipRemainingHalf, nil];
[house runAction:seq];

CCSequence выполняет ряд действий и выполняет их одно за другим. Последний аргумент — это конструкция Objective-C, называемая селектором; он определяет метод для вызова после завершения действий. Это необязательно, и нам не нужно никакого уведомления, поэтому мы просто передаем его nil.

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

Эта последовательность перевернет дом, но мы также хотим сделать его серым: . Cocos2D предоставляет специальные действия для тонирования, но мы хотим качественное изображение для серого дома, поэтому мы будем использовать файл PNG. Ни одно из действий по умолчанию не заменяет изображение спрайта, поэтому нам нужен небольшой собственный код. Cocos2D обеспечивает максимальную гибкость с [CCCallFunc](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_call_func.html) действие, которое находится внутри последовательности и вызывает любой код, который вы хотите.

Когда визит заканчивается, дом становится серым, поэтому мы создадим новую функцию с именем visitEnded и определить его на HouseNodeвот так (HouseNode.mm):

-(void)visitEnded {
    CCSpriteFrameCache* cache = [CCSpriteFrameCache sharedSpriteFrameCache];
    CCSpriteFrame* frame;
    frame = [cache spriteFrameByName:@"house_gray.png"];
    [self.house setDisplayFrame:frame];
}

У нас уже есть значок серого дома, так что visitEnded функция получает этот значок из кеша спрайтов и устанавливает его в наш house спрайт. Теперь нам просто нужно настроить нашу последовательность для вызова visitEnded в середине анимации. Этот код становится немного сложным, поэтому мы добавим его в новый метод на HouseNode и назови это visit.

-(void) visit {
    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]];

    CCSequence* seq = [CCSequence actions:flipHalf,
                      [CCCallFunc actionWithTarget:self selector:@selector(visitEnded)],
                      flipRemainingHalf, nil];

    [self.house runAction:seq];
}

Эта новая последовательность раздавит домпозвоните в visitEnded метод с CCCallFunc сделать дом серым и растянуть дом обратно.

Cocos2D предоставляет ряд действий для вызова пользовательского кода, например [CCCallFuncN](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_call_func_n.html) и [CCCallBlock](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_call_block.html). Каждый из них представляет собой вариант вызова пользовательского кода во время последовательностей. Сочетание готовых анимаций с пользовательским кодом создает идеальную среду для сложных анимаций.

Объединение нескольких анимаций в системы частиц

Мы рассмотрели простые анимации и несколько более сложных взаимодействий. Теперь давайте пофантазируем с частицами. Cocos2D предоставляет набор более сложных анимаций, каждая из которых начинается с [CCParticleSystem](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_particle_system.html).

Системы частиц — это не действия. Они используют действия для создания гибких стандартных анимаций. Они потрясающие, сложные и плохо документированные. Системы частиц хорошо подходят для имитации природных явлений. такие как дождь и дым.

Когда вы пройдете уровень «Семи мостов», мы дадим вам небольшую награду: конфетти в форме звезды, которые вращаются и плавают по экрану. Мы добавляем причудливости к этим звездам с некоторой случайностью и собираем все воедино с помощью системы частиц с именем [CCParticleRain](https://www.cocos2d-iphone/api-ref/2.1.0/interface_c_c_particle_rain.html).

Так что… гм… нет никакого способа облегчить это — вот действительно большой кусок кода (LevelLayer.mm):

-(void) showConfetti: (float) x y:(float) y {
    self.emitter = [[CCParticleRain alloc] init];
    [self.emitter setScaleX:0.5];
    [self.emitter setScaleY:0.5];

    [self.emitter resetSystem];
    self.emitter.texture = [[CCTextureCache sharedTextureCache] addImage:@"confetti.png"];

    self.emitter.duration = 1.5;

    // Set the gravity effect for the stars to control how
    // fast they fall down.
    self.emitter.gravity = ccp(self.player.player.position.x, 90);

    // Specify the angle of the stars as they extend from the
    // starting point.
    self.emitter.angle = 90;
    self.emitter.angleVar = 360;

    // The speed the particles will use when floating
    self.emitter.speed = 160;
    self.emitter.speedVar = 20;

    // The radial variable
    self.emitter.radialAccel = -120;
    self.emitter.radialAccelVar = 120;

    // The tangential variable
    self.emitter.tangentialAccel = 30;
    self.emitter.tangentialAccelVar = 60;

    // How long each star should last before fading out
    self.emitter.life = 1;
    self.emitter.lifeVar = 4;

    // How much each star should spin
    self.emitter.startSpin = 15;
    self.emitter.startSpinVar = 5;
    self.emitter.endSpin = 360;
    self.emitter.endSpinVar = 180;

    // The color of the stars as RGB values.  Each color uses
    // a variable value for where the stars should start and
    // what color they should use when they're done.
    ccColor4F startColor = {171.0f, 26.0f, 37.0f, 1.0f};
    self.emitter.startColor = startColor;
    ccColor4F startColorVar = {245.0f, 255.f, 72.0f, 1.0f};
    self.emitter.startColorVar = startColorVar;
    ccColor4F endColor = {255.0f, 223.0f, 85.0f, 1.0f};
    self.emitter.endColor = endColor;
    ccColor4F endColorVar = {255.0f, 131.0f, 62.0f, 1.0f};
    self.emitter.endColorVar = endColorVar;

    // The size of each of the stars
    self.emitter.startSize = 50.0f;
    self.emitter.startSizeVar = 20.0f;
    self.emitter.endSize = kParticleStartSizeEqualToEndSize;

    // The rate at which new stars will be created
    self.emitter.totalParticles = 250;
    self.emitter.emissionRate = self.emitter.totalParticles/self.emitter.life;

    // The position to start the stars
    self.emitter.posVar = ccp(x + 20, y - 20);
    self.emitter.position = ccp(x,y);

    // We have a simple white background, so we don't want to
    // do additive blending.
    self.emitter.blendAdditive = NO;

    // Now we're ready to run the particle emitter
    [self addChild: self.emitter z:10];
    self.emitter.autoRemoveOnFinish = YES;

    // We call the doWon function when the particle system completes
    // so that we can take the player to the You Won screen.
    [self scheduleOnce:@selector(doWon) delay:3];
}

Этот код исходит из [LevelLayer](https://github.com/zgrossbart/bridges/blob/master/bridges2/LevelLayer.mm), который управляет взаимодействием игрока с экраном воспроизведения. Когда игрок выигрывает уровень, мы вызываем showConfetti метод и передать текущее местоположение игрока.

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

Большая часть этого кода просто настраивает CCParticleRain и говорит ему, как себя вести. Системы частиц очень гибкие и поддерживать головокружительный набор свойств конфигурации. Эти свойства плохо документированы; Я нашел большинство из них, просмотрев исходный код Cocos2D.

Системы частиц достигают естественного вида, добавляя к ним случайную изменчивость. Вы контролируете диапазон случайности с помощью var характеристики. Например, мы хотим, чтобы звезды в начале были в 20-50 раз больше их обычного размера, поэтому мы указываем startSize свойство 50.0f и startSizeVar свойство 20.0f. Это означает, что каждая из звезд будет начинаться где-то между этими двумя значениями.

Создайте свою собственную анимацию

Теперь, когда вы ознакомились с некоторыми основными концепциями анимации Cocos2D, вы можете создавать свои собственные. Легко начать с замены семи мостов. Просто скачайте исходный код и начните его настраивать.

Добавьте анимацию мигания, чтобы персонаж игрока моргал во время движения. Взгляни на [PlayerNode](https://github.com/zgrossbart/bridges/blob/master/bridges2/PlayerNode.mm) чтобы увидеть последовательность перемещения игрока по экрану. Поиграйте с излучателем частиц, чтобы изменить способ работы звезд.

В этой статье мы рассмотрели программную анимацию в играх, но Cocos2D также поддерживает анимацию на основе спрайтов.. Эти анимации воспроизводят серию изображений, чтобы создать иллюзию движения, что-то вроде флип-книги. Seven Bridges использует этот стиль анимации при перемещении игрока по экрану.

У Рэя Вендерлиха есть замечательный учебник по анимации на основе спрайтов под названием «Как использовать анимацию и листы спрайтов в Cocos2D». Статья отличная, но в ней упоминается продукт под названием Zwoptex, и вместо него я настоятельно рекомендую TexturePacker.

(аль)