- PVSM.RU - https://www.pvsm.ru -
Добрый день.
Те, кто начал программировать на cocos2d, наверняка столкнулись с недостатком различных control-элементов. У меня была задача сделать скроллинг для игрового магазина без интеграции с UIKit стандартными средствами кокоса. Поискав в интернете, я нашла несколько реализаций для этого дела, но не устраивали некоторые вещи, например, отсутствие обработки свайп (быстрого касания) и кривое возвращение скроллинга на свою позицию. В результате, приложив определенные усилия, получила, в конечном итоге, скроллинг такого вида:
Здесь [1] можно скачать проект.
При запуске вы увидите вот такой экран:
Нажмите кнопку “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 [2]. Для создания шрифтов использовался GlyphDesigner [3].
Также в проекте находятся вспомогательные файлы Utils.h и Utils.m. Здесь я размещаю функции преобразования размеров между устройствами и макросы определения версии IOS. Это удобно, т.к. обычно эти функции приходится вызывать из разных классов. Кроме того, в Utils есть еще одна весьма полезная функция:
CCSprite* spriteWithColor (ccColor4B bgColor, CGSize textureSize)
Эта функция создает спрайт заданного размера, цвета и прозрачности. Я часто использую эти спрайты для затемнения общего фона (например, при окончании прохождения уровня). Вместо этого, можно было бы использовать обычный однотонный *.png. Поскольку это вспомогательная функция, которая не имеет прямого отношения к scrolling для game-магазина, я не буду останавливаться на ней подробно. Прообраз этой функции взят из этого урока [4]. Если интересно, пишите в комментариях, могу набросать несколько интересных примеров из этой серии.
Ключевыми файлами скроллинга являются 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). Основные моменты указаны цифрами в коде:
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"ShopArt.plist"];
spriteBatch = [CCSpriteBatchNode batchNodeWithFile:@"ShopArt.pvr.ccz"];
Прокрутка скролинга осуществляется следующим образом: при плавном движении он следует за пальцем, при быстром движении (свайп) продолжает прокручиваться после остановки пальца. Для этого в процедуре
Вот собственно и все. Надеюсь статья будет кому-то полезной.
Автор: IrixV
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/news/41431
Ссылки в тексте:
[1] Здесь: https://github.com/IrixVol/Cocos2d-Scrolling
[2] TexturePacker: http://www.codeandweb.com/texturepacker
[3] GlyphDesigner: http://www.71squared.com/
[4] этого урока: http://www.raywenderlich.com/33266/how-to-create-dynamic-textures-with-ccrendertexture-in-cocos2d-2-x
[5] Источник: http://habrahabr.ru/post/190836/
Нажмите здесь для печати.