среда, 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)

вторник, 12 февраля 2013 г.

Переходим на cocos2d 2.0

Всем привет!
Да, извиняюсь, что давно не писал сюда - очень затянули текущие проекты)
И все-таки, надо продолжать начатое.

Устанавливаем cocos2d 2.0 и Kobold2d