Cocos2d. Введение в меню. Работа со сценами. Переходы между сценами.

Сегодня рассмотрим, работу со сценами, меню и различными видами анимации.

Создаем новый проект

   Создадим проект, в недавнем времени, я обновил кокос до версии - cocos2d-iphone v2.1-beta2 и темплейтах там уже сделано, буквально, за вас - все.  Но начнем все с чистого листа.

Сцена, в которой будем работать 

     Итак, в методе init , попробуем создать меню (CCMenu).
  

Объявление компонента меню

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

   Для начала, попробуем создать компонент меню, при помощи простого текста. Для этого подойдет CCMenuItemFont.

Объявление наследника компонента меню (Текстовую кнопку(CCMenuItemFont))

   Для обычной текстовой кнопки подойдет и CCMenuItemFont, но если вам нужно что бы текст на кнопки был какого-то определенного или вашего (если вы используете не стандартные шрифты) шрифта - для этого сначала прийдется создать компонент CCLableTTF c указанным шрифтом, а потом у ItemFont использовать конструктор itemWithLabel:.


   Еще один пример,  как создать ToggleButton (Переключатель).
Для этого, создаем две любые кнопки и вкладываем их в компонент CCMenuItemToggle.

Создание меню с парой кнопок

    Для добавления кнопок в меню, используем конструктор menuWithItems:. Кнопки, так же можно добавлять и уже после инициализации самого меню, через метод addChild:, как и у простого слоя.
    Что бы все заработало, надо обязательно реализовать "заглушки" для селекторов назначенных на кнопки, иначе, проект даже не запустится.
    Теперь можно запустить проект и посмотреть на результат.

Реализация текстовой кнопки и переключателя

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

Новый класс с тестовой картинкой

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

Обработка нажатия на кнопку, с последующим переходом на новую сцену

После нажатия на кнопку

     Переход между сценами я сделал через replaceScene:, но на самом деле есть и другие методы переходов. О них сейчас и пойдет речь.

     Рассмотрим несколько из этих методов, которыми чаще пользуются.

    1. replaceScene: - один из часто используемых методов для прехода. Суть его состоит в полной замене одной сцены, другой. При этом, все переменные, данные и структуры, существующие в заменяемой сцене - уничтожаются. Все было бы отлично, но тут есть одно НО! Пока полностью не загрузится новая сцена - старая не будет удалена. Т.е. в короткий промежуток времени, в памяти девайса, будут висеть две полностью загруженные сцены, что не есть good. Так как устройство может не выдержать нагрузки или просто не хватит памяти. По этому во всех источниках, рекомендуется использовать промежуточные сцены с минимальным контентом (Экраны загрузки или какие нибудь аналоги).

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

    3. popScene: - еще одна функция работы со стеком сцен. Эта функция позволяет вызвать/вытянуть/поднять последнюю добавленную сцену в стек.

    4. runWithScene: - тут я думаю особых комментариев не требуется). Запускаем выбранную сцену.

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

    Для переходов между сценами, существует целая структура/группа методов позволяющая прикрутить анимацию к переходам, одну из них мы уже использовали (CCTransitionProgressRadialCCW)

   Я сделал не большую выписку этих самых анимаций( в какой-то момент времени мне этот список был необходим, но ни на одном ресурсе я так и не смог его найти, по этому пришлось пробовать все потихоньку):

 CCTransitionCrossFade - плавный переход между сценами

 CCTransitionFade - плавный переход между сценами с затемнением

 CCTransitionFadeBL - переход квадратами с правого верхнего угла, в левый нижний

 CCTransitionFadeDown - жалюзи, вниз

 CCTransitionFadeTR - переход квадратами с левого нижнего угла, в правый верхний

 CCTransitionFadeUp - жалюзи, вверх

 CCTransitionFlipAngular - переход с поворотом на 180 градусов

 CCTransitionFlipX - переход с поворотом на 180 градусов по x

 CCTransitionFlipY - переход с поворотом на 180 градусов по y

 CCTransitionJumpZoom - переход с уменьшением/увеличением сцены и эффектом прыжка

 CCTransitionMoveInB - перекрытие новой сценной снизу

 CCTransitionSlideInL - смещение сцены новой слева

 CCTransitionSlideInR - смещение сцены новой справа

 CCTransitionSlideInT - смещение сцены новой сверху

 CCTransitionSlideInB - смещение сцены новой снизу

 CCTransitionShrinkGrow - переход очень похожий на CCTransitionJumpZoom, но без эффекта

   прыжка

 CCTransitionPageTurn - поворот страницы

 CCTransitionRadialCCW - эффект часовой стрелки

 CCTransitionRotoZoom - эффект закручивания по спирали

 CCTransitionScene - мгновенная замена сцены

 CCTransitionSceneOriented - переход с возможностью установки ориентации экрана

 CCTransitionSplitCols - переход через двигающиеся колонки

 CCTransitionSplitRows - анологоичный эффекту CCTransitionSplitCols, только через рядки

 CCTransitionTurnOffTiles - переход через рандомно заменяющиеся квадратики

  

 На этом все пока ;)  Всем удачи в экспериментах и алхимии) И с наступающим Новым Годом!