Основы 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:selectedtarget: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:selfselector:@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)
