среда, 27 февраля 2013 г.

Основы cocos2d. Статья 7. Надписи и меню


Основы cocos2d. Статья 7. Работа с надписями CCLabelTTF и меню CCMenuItem


Всем привет!
Уфф, значительный выдался перерыв.
И тем не менее, мы продолжаем.
Сегодня мы познакомимся с надписями и менюшками :)

Надписи CCLabelTTF

Если нам необходимо написать какой-то текст на экране, то надписи - это наш выбор.
Вот пример создания надписи:
CCLabelTTF *label = [CCLabelTTF labelWithString:@"text" fontName:@"AppleGothic" fontSize:32];

Технически, надпись рендерится на CCTexture2D-текстуре и перерисовывается всякий раз, когда меняется текст, а поскольку пересоздание текстуры для надписи - процесс медленный, то лучше не менять текст слишком часто, уж точно не в каждом кадре.
Кстати, для смены текста используется вызов:
[label setString:@"new text"];

Кстати, текст выравнивается по центру, это происходит за счет того, что по умолчанию anchor point (якорь, мы говорили о них в прошлых уроках) установлен в позицию 0.5, 0.5.
Передвигая якорь, мы можем выравнивать текст по левому краю, по правому краю, по верху, низу.
Вот примеры:
label.anchorPoint = CGPointMake(1, 0.5f);//по правому краю
label.anchorPoint = CGPointMake(0, 0.5f);//по левому краю
label.anchorPoint = CGPointMake(0.5, 1);//по верху
label.anchorPoint = CGPointMake(0.5f, 0);//по низу
//пример использования в сцене
CGSize size = [[CCDirector sharedDirector] winSize];//запрашиваем размер экрана у режиссера
label.position = CGPointMake(winSize.width, winSize.height);//размещаем надпись в верхнем 
//правом углу
label.anchorPoint = CGPointMake(1,1);//теперь надпись будет выравнена по правому краю и 
//при увеличении количества текста, она будет "уходить" влево и вниз


Меню CCMenu

Когда вам необходима кнопка, которую пользователь будет жать для перехода на следующий уровень или использовать для включения-выключения настроек - вот тогда вам и понадобится меню.
Меню (CCMenu) - это тот же слой CCLayer, но он может принимать в себя только объекты меню CCMenuItem.
Вот иерархия объектов CCMenuItem:

Вот пример кода для создания меню:
CGSize size = [CCDirector sharedDirector].winSize;
// устанавливаем значения по умолчанию для CCMenuItemFont
[CCMenuItemFont setFontName:@"Helvetica-BoldOblique"];//название шрифта
[CCMenuItemFont setFontSize:26];//размер шрифта
// создадим несколько надписей с текстом и селектором
CCMenuItemFont* item1 = [CCMenuItemFont itemWithString:@"Go Back!"
                           target:self
                         selector:@selector(menuItem1Touched:)];

// создадим пункт меню, используя спрайт
CCSprite* normal = [CCSprite spriteWithFile:@"Icon.png"]; normal.color = ccRED; CCSprite* selected = [CCSprite spriteWithFile:@"Icon.png"]; selected.color = ccGREEN; CCMenuItemSprite* item2 = [CCMenuItemSprite itemWithNormalSprite:normal
                         selectedSprite:selected
 target:self selector:@selector(menuItem2Touched:)];

// создадим переключатель с двумя другими пунктами меню (переключатель работает и
// с изображениями
// переключатель - это элемент с несколькими состояниями, меняющимися по нажатию
[CCMenuItemFont setFontName:@"STHeitiJ-Light"];
[CCMenuItemFont setFontSize:18];
CCMenuItemFont* toggleOn = [CCMenuItemFont itemWithString:@"I'm ON!"];
CCMenuItemFont* toggleOff = [CCMenuItemFont itemWithString:@"I'm OFF!"];
CCMenuItemToggle* item3 = [CCMenuItemToggle itemWithTarget:self
 selector:@selector(menuItem3Touched:) items:toggleOn, toggleOff, nil];
//создадим меню, используя все созданные ранее элементы
CCMenu* menu = [CCMenu menuWithItems:item1, item2, item3, nil];
menu.position = CGPointMake(size.width/2, size.height/2);
[self addChild:menu];
// вертикальное выравнивание важно, чтобы элементы не занимали одинаковую
// позицию на экране
[menu alignItemsVerticallyWithPadding:40];
Уфф.. Немало кода, верно?
Но - что поделать - это все-таки меню! Вручную, без cocos2d, создавать все то же самое было бы на порядок сложнее и дольше.
Во-первых, обратите внимание, что когда мы создавали CCMenu, мы перечислили список элементов item1, item2, item3 и закончили его элементом nil - это важное техническое требование и если вы забудете передать nil последним элементом - в какой-то момент ваше приложение упадет.
Теперь давайте разберем, какие менюшки мы использовали.
Сначала мы создали пункт меню на основе CCMenuItemFont - этот тип меню просто отображает строку. Мы добавили селектор, так что при нажатии на это меню вызывается метод menuItem1Touched.
Внутри cocos2d, этот пункт меню просто создает CCLabel. Если у вас уже есть надпись, вы можете использовать ее вместо этого с классом CCMenuItemLabel.
Аналогично, мы создали два пункта меню - одно CCMenuItemImage, которое на самом деле создает CCSprite с изображением из файла и использует его. Меню CCMenuItemSprite использует уже готовый спрайт, что, как мне кажется, удобнее - вы можете использовать существующее изображение и просто подсвечивать его цветом для эффекта выделения.
CCMenuItemToggle (переключатель) принимает два (ровно) элемента, происходящих от CCMenuItem, и по нажатию, отображает то один, то другой. То есть сначала отображается первый элемент, если нажать его - он скроется и вместо него появится второй. И т.д. Можно использовать или надписи, или изображения в нашем переключателе.
Ну и наконец мы создаем CCMenu и позиционируем его по центру. Все пункты меню CCMenuItem являются "детьми" меню, т.к. содержатся внутри него, а значит, как мы помним из рассказов о CCLayer, они позиционируются относительно нашего меню.
Чтобы они все не наложились друг на друга, мы и добавили последнюю строчку, которая выравнивает все пункты вертикально с расстоянием между ними. У меню есть и другие align-методы для выравнивания.
Меню - это CCNode с элементами, поэтому технически можно улучшить его, делать скроллинги и т.д. Я постараюсь в будущих уроках показать более продвинутые фишки для работы с меню.
Ну а вот что получится, если запустить приложение с нашим меню:
Спасибо за внимание!
Надеюсь, урок понравился!
Пожелайте не задержаться со следующим ;)) 
Удачи!

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

6 комментариев:

  1. Уроки отличные, но не понятно, где и какой метод когда записывать (я в общем про весь движок), хотя я понимаю как методы работают. Быть может сделаете практический урок с разработкой, скажем, небольшой игры?

    ОтветитьУдалить
  2. отличные уроки, спасибо! с нетерпением жду следующих.
    присоединяюсь к просьбе на практическое занятие :)

    ОтветитьУдалить
  3. Спасибо. Супер уроки, читаются на одном дыхании. Когда будет продолжение?

    ОтветитьУдалить
  4. Спасибо за статьи
    П.с. тут методы -(void)menuItem1[2][3]Touched надо реализовать, иначе урок не полный :)

    ОтветитьУдалить
  5. спасибо, автор возвращайся :)

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