Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Cocos2d IOS: пишем scrolling для game-магазина

Anna | 2.07.2014 | нет комментариев

Те, кто начал программировать на cocos2d, наверно столкнулись с недостатком разных control-элементов. У меня была задача сделать скроллинг для игрового магазина без интеграции с UIKit стандартными средствами кокоса. Поискав в интернете, я обнаружила несколько реализаций для этого дела, но не устраивали некоторые вещи, скажем, неимение обработки свайп (стремительного касания) и кривое возвращение скроллинга на свою позицию. В итоге, приложив определенные усилия, получила, в финальном выводе, скроллинг такого вида:

Тут дозволено скачать план. 
При запуске вы увидите вот такой экран:

imageimage

Нажмите кнопку “Shop” — вот пример скролинга, код которого мы детально разберем ниже.

Для начала посмотрим на файлы плана. Серым подмечены типовые кокосовские файлы, которые образуются при создании нового плана. Они остаются с небольшими изменениями: в HelloWorldLayer.m переписана функция init: удалено все, что относилось к Game Center, и добавлена надпись “Shop” для входа в магазин, и соответствующая ей функция:

- (void) goToShop
{
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"ShopArt.plist"];
[[CCDirector sharedDirector] pushScene:[CCTransitionCrossFade transitionWithDuration:0.2 scene:[ShopMenu node]]]; 
}

В план включены все нужные картинки и шрифты. Картинки для магазина объединены в атлас с поддержкойTexturePacker. Для создания шрифтов применялся GlyphDesigner.

Также в плане находятся вспомогательные файлы Utils.h и Utils.m. Тут я размещаю функции реформирования размеров между устройствами и макросы определения версии IOS. Это комфортно, т.к. обыкновенно эти функции доводится вызывать из различных классов. Помимо того, в Utils есть еще одна крайне пригодная функция:

CCSprite* spriteWithColor (ccColor4B bgColor, CGSize textureSize)

Эта функция создает спрайт заданного размера, цвета и прозрачности. Я Зачастую использую эти спрайты для затемнения всеобщего фона (скажем, при окончании прохождения яруса). Взамен этого, дозволено было бы применять обыкновенный однотонный *.png. От того что это вспомогательная функция, которая не имеет прямого отношения к scrolling для game-магазина, я не буду останавливаться на ней детально. Прообраз этой функции взят из этого урока. Если увлекательно, пишите в комментариях, могу набросать несколько увлекательных примеров из этой серии.

Ключевыми файлами скроллинга являются 4 файла ShopMenu.h, ShopMenu.m, ShopMenuItemLabel.h, ShopMenuItemLabel.m.
В файле ShopMenu.h представлены два класса: класс сцены (ShopMenu) и содержащийся в нем класс скролинга(MenuScroll). Класс сцены стандартно отнаследован от CCScene и организован дальнейшим образом:

На задний план мы кладем картинку фона (CCSprite, zOrder =-2), на нее кладем затемнение, Дабы снизить яркость (CCSprite, zOrder =-1), дальше идет непринужденно класс скролинга со каждому содержимым (MenuScroll, zOrder =1), и самый верхний ярус — это панели с кнопкой выхода (CCSprite, zOrder =2). Класс сцены состоит из стандартных способов, в коде они снабжены подробными комментариями.

Выходит, наконец мы можем обратиться к классу скролинга (MenuScroll). Разглядим способ initWithTop (ShopMenu.m). Основные моменты указаны цифрами в коде:

  • (1) Необходимо указать число позиций в магазине;
  • (2) Рассчитаем высоту одной строки. Скажем, на iphone у меня 3 строки на одном экране, таким образом высота строки = (480 – 2*57(панели))/3 = 122. В коде у меня 123 с поправкой на размер разделителей. Для IPad и IPhone5 высота будет отличатся, если вы хотите получить целое число строк на экране;
  • (3) Считаем высоту скролинга как произведение числа строк на высоту строки. На последней картинке видно, что сам скролинг длинее экрана;
  • (4) Дозволено задействовать BatchNode. Обыкновенно такие команды идут в паре:
    [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"ShopArt.plist"];
    spriteBatch = [CCSpriteBatchNode batchNodeWithFile:@"ShopArt.pvr.ccz"];
    но в нашем случае мы открыли *.plist, еще до входа в магазин, т.к. потребовалось сделать спраты для верхней и нижней панели;
  • (5) Устанавливаем комплект параметров. Кнопку ”Купить” нужно блокировать при перемещении скролинга, за это отвечает параметр isDragging. Как только начинается движения пальца по экрану, параметру присваевается значение YES;
  • (6) Определяем позицию скролинга. Это точка (0,-h), где h — это высота, на которую скролинг уходит вниз за пределы видимой области (последняя картинка).
  • (7) Кнопки ”Купить” являются item’ами меню (8). Позиция кнопок не задается отдельно, а задается только для каждого меню. Внутри меню мы упорядочиваем кнопки с поддержкой функции alignItemsVerticallyWithPadding (9). Соотвественно, нам необходимо задать kPadding и высоту кнопки “Купить”. Все совместно это должно быть равно высоте строки, посчитанной в пункте (2), вне зависимости от размера шрифта. Присваивание размера кнопки осуществляется функцией [item setContentSize..] (10). Это дюже комфортно, т.к. мы можем задать размер кнопки, чудесный от реального размера ее шрифта либо спрайта;
  • (12) Когда я нажимаю кнопку “Купить”, мне бы хотелось знать код покупки, цену и т.п. Помимо того, мне бы хотелось disabl’ить кнопку покупок позже совершения операции. Следственно взамен стандартного класса CCMenuItemLabel, я сотворю на его основе ShopMenuItemLabel (глядите ShopMenuItemLabel.h). В этом классе добавлены переменные num, price, maxQuantity и переписан способ setIsEnabled, тот, что делает неактивную кнопку “Купить” полупрозрачной.
  • (13) Сейчас хотелось бы наполнить наши “полки”, картинками (12), изложениями (13) и ценами (14).

Прокрутка скролинга осуществляется дальнейшим образом: при плавном движении он следует за пальцем, при стремительном движении (свайп) продолжает прокручиваться позже остановки пальца. Для этого в процедуре

  • в ccTouchesBegan запомнили координату Y и время начала движения для проверки стремительных жестов;
  • в ccTouchesMoved скролинг сурово двигается за пальцем;
  • в ccTouchesEnded (1) — проверяем было ли стремительное движение, в соответствии с этим перемещаем скролинг добавочно, (2) — если скроллинг вышел за пределы возможной области ставим его на место, (3) – проверяем, была ли нажата кнопка меню;

Вот собственно и все. Верю статья будет кому-то пригодной.

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB