среда, 9 января 2013 г.

Основы. Статья 4. Сцены и анимации перехода

Основы cocos2d. Статья 4. Сцены и анимации перехода

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

В этой статье - узнаем еще больше ;)

Добавление и удаление сцен

В прошлой статье мы научились заменять одну сцену другой.
В cocos2d предусмотрен еще один способ работы со сценами - он заключается в добавлении сцен "сверху" на уже отображаемую на экране (по аналогии можно представить несколько листов бумаги, которые накладываются друг на друга, при этом закрывая собой нижние листы).
В чем смысл этого, если "нижние" сцены все равно не видны?

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

Есть несколько типичных случаев применения этих методов.
Например, экран настроек - когда пользователь прерывает игру на настройки, достаточно просто добавить экран настроек "сверху" текущей сцены, чтобы она оставалась в памяти.
Или в любом другом случае, когда игроку нужно показать какую-то информацию на другом экране, но при этом хочется оставить текущее состояние игры, а не сохранять его куда-то и потом восстанавливтаь.

Важно еще помнить о том, что для добавления сцены "сверху" необходимо иметь достаточно свободной памяти, поэтому общее правило здесь такое - все добавляемые "сверху" сцены должны быть легкими, желательно не добавлять "сверху" более чем одну сцену (то есть добавленная сцена не должна в свою очередь добавлять сверху другую сцену) и добавляемая сверху сцена не должна иметь вызова replaceScene.

Допустим, у нас есть существующий класс Settings (настройки), тогда для того, чтобы добавить его сцену "сверху" текущей, нам нужно сделать вызов pushScene(добавить сцену):

[[CCDirector sharedDirector] pushScene:[Settings scene]];

А внутри самого класса Settings, в обработчике, отвечающем за "выход"из настроек, делаем вызов popScene (убрать сцену):

[[CCDirector sharedDirector] popScene]; 

Кстати, в случае с вызовом pushScene, можно делать анимацию перехода, как мы делали в прошлой статье с помощью CCSceneTransition (аналогичным образом, передавая в pushScene объект, унаследованный от класса CCSceneTransition - далее я напомню, как это делать).
Правда, для popScene эти анимации недоступны.

Анимации перехода

Анимации перехода - классы, унаследованные от CCSceneTransition, позволяют создать анимации перехода от одной сцене к другой.
Далее представлены все встроенные в cocos2d анимации (на рисунке - на английском) и ниже - их расшифровка на русском :)
Советую добавить это в закладки - пригодится ;)
Важно: помните, что хоть вам и доступна куча клевых возможных переходов, это вовсе не значит, что вы обязаны использовать в своей игре все и каждый :)
Старайтесь не делать затянутых переходов и выбирайте тот переход от сцене к сцене, который выглядит логичным. А если сомневаетесь, стоит ли делать тот или иной переход - не делайте вообще, игрокам геймплей важнее, чем анимации ;) Хотя, это дело вкуса.

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

//создаем анимацию для следующей сыены  
CCTransitionFade* tran = [CCTransitionFade transitionWithDuration:1
scene:[HelloWorld scene] withColor:ccWHITE];
//передаем режиссеру анимацию вместо сцены
[[CCDirector sharedDirector] replaceScene:tran]; 


  • CCTransitionFade: переход к заданному цвету и обратно
  • CCTransitionFadeTR (3 варианта) - переход "плиткой"
  • CCTransitionJumpZoom - уходящая сцена прыгает и уменьшается, новая - наоборот
  • CCTransitionMoveInL (и 3 варианта) - одна сцена "укатывает" (влево, вправо, вверх, вниз), а другая - "прикатывает" :)
  • CCTransitionSceneOriented (и 6 вариантов) - большое количество вариантов с "переворотами" (и зумом)
  • CCTransitionPageTurn - эффект "переворота" страницы
  • CCTransitionRadialCCW (и еще 1 вариант) - эффект "радара" (по часовой или против часовой стрелки)
  • CCTransitionRotoZoom - сцена вращается и уменьшается, новая - наоборот
  • CCTransitionShrinkGrow - текущая сцена сжимается, новая - вырастает
  • CCTransitionSlideInL (и 3 варианта) - новая сцена "заезжает" (слева, сверху, снизу, справа) поверх старой
  • CCTransitionSplitCols (и еще 1 вариант) - сдвиг колонок (либо рядов), с появлением рядов или колонок новой сцены
  • CCTransitionTurnOffTiles - плитка из старой сцены случайным образом заменяется плиткой из новой сцены

Фууух... Это был еще один длинный урок :)
Надеюсь, он понравился.

Если у кого есть идеи, как лучше описать анимацию - можно в комменты)

Ну а в следующем уроке мы ближе познакомимся со слоями, работой с касаниями пользователя и акселерометром! Круто? Еще бы! Так что не переключайтесь :)




Иллюстрации и примеры кода взяты из книги Learn cocos2d Game Development with iOS 5.
Посетите также блог автора книги ("Learn Cocos2d", Steffen Itterheim)


2 комментария:

  1. Дуже цікаві статті, але є одна порада - спробуйте після кожної теоретичної статті давати практичний приклад маленької програми з коментарями.

    ОтветитьУдалить