Здравствуйте, хабражители!
Первая моя игра была написана iPhone SDK про писающего мальчика, она очень тормозила на 3G и 3GS. Вторую сделал с меньшей нагрузкой на процессор, при этом я уже слышал о cocos2d, прочитав документацию про него, я решил к SDK, больше не возвращаться и начал программировать под эту платформу. В этой статье я не буду описывать как устанавливать cocos2d, это описано здесь, постараюсь не повторяться с этим постом. Могу лишь добавить есть стабильная 1.0.1 версия. В этой статье я расскажу как создать меню, анимацию и переход между слоями.
Итак, к делу.
Создаем проект на cocos2d, ориентируем его на iPad, переходим к файлу HelloWorldLayer.m и в методе -(id) init создаем спрайт для заднего фона:
могу добавить, что когда добавляем наш спрайт на слой можно добавить тег:
Далее, здесь же создаем меню:
меню cocos2d является альтернативой кнопок iPhone SDK, здесь мы рассмотрели 2 вида ячеек(картинка и надпись), как видете они ссылаются на некие методы, в нашем случае это переходы на другие слои:
В этом случае
Создаем файлы Options, нажимаем команд + N:
как видно на последнем скриншоте мы создает кастомный слой, по умолчанию он черный, но поигравшись в RGB вы можете поставить любой цвет.
Далее создаем CCMenu и метод возвращающий обатно в главно меню:
popScene убирает текущий слой. Будьте осторожны под этим слоем должен быть любой другой, как писалось выше, мы именно накладываем слой, в противном случае выдаст ошибку.
Далее создаем слой Game:
Создаем задний фон и ставим задержку перед созданием другого спрайта в файле Game.m:
здесь я применил anchorPoint, далее увидим его реальное применение:
здесь мы применяем разные действия над тараканом. Когда скомпилируем и увидем, что таракан двигается с ускорением, а потом вращается, при этом точка вращения левый нижний угол, это и есть тот anchorPoint которому мы указали (0, 0). Мы указали движение таракана, за перемещение отвечает CCMoveBy, за плавность ускорения и замедления во время перемещения отвечает CCEaseInOut, за вращение CCRotateBy. Так же мы тут видим применение CCSequence, эта команда применяется для того, что бы действия над спрайтом шли по очереди.
И последнее, создаем анимацию после задержки:
большую часть я прокомментировал, добавлю что текстуру я создавал с помощью zwoptexapp.com, это бесплатно, там я получил plist и png файлы, перетащил их в проект. Так выглядит
а так
Так же видно, при применении действия вместо CCSequence, применили CCSpawn, эта команда применяется для того, что бы действия над спрайтом шли одновременно.
Часто вижу на форумах проблемы с созданием анимации на cocos2d, поэтому включил её в эту статью. Надеюсь эта статья будет кому-то полезна.
Проект можно скачать здесь.
Первая моя игра была написана iPhone SDK про писающего мальчика, она очень тормозила на 3G и 3GS. Вторую сделал с меньшей нагрузкой на процессор, при этом я уже слышал о cocos2d, прочитав документацию про него, я решил к SDK, больше не возвращаться и начал программировать под эту платформу. В этой статье я не буду описывать как устанавливать cocos2d, это описано здесь, постараюсь не повторяться с этим постом. Могу лишь добавить есть стабильная 1.0.1 версия. В этой статье я расскажу как создать меню, анимацию и переход между слоями.
Итак, к делу.
Создаем проект на cocos2d, ориентируем его на iPad, переходим к файлу HelloWorldLayer.m и в методе -(id) init создаем спрайт для заднего фона:
-(id) init
{
if( (self=[super init])) {
// автоматически определяет размеры экрана, в зависимости от девайса
CGSize size = [[CCDirector sharedDirector] winSize];
//Создаем backgroung
CCSprite * background = [CCSprite spriteWithFile:@"clean bg.png"];
//Распологаем наш спрайт по центру
background.position = ccp(size.width/2, size.height/2);
//добовляем наш спрайт на CCLayer при этом он должен быть на заднем фоне,
//за это отвечает z:-1
[self addChild:background z:-1];
}
return self;
}
могу добавить, что когда добавляем наш спрайт на слой можно добавить тег:
[self addChild:background z:-1 tag:100];
это делается для того что бы можно было найти спрайт по тегу в другом методе или классе, это делается так: CCSprite *spr = (CCSprite *)[self getChildByTag:100];
потом делаете что хотите с этим спрайтом.Далее, здесь же создаем меню:
//Создаем ячейки меню
//Ячейка с картинкой
CCMenuItemImage * image = [CCMenuItemImage itemFromNormalImage:@"new_game.png"
selectedImage:@"new_game.png" target:self
selector:@selector(perehod_v_igru)];
//Распологаем нашу ячейку относительно меню(начало координат в центре,
//там где мы расположили наше меню)
image.position = ccp(0, 50);
//Ячейка с font
CCMenuItemFont * font = [CCMenuItemFont itemFromString:@"Опции" target:self
selector:@selector(options)];
font.position = ccp(0, -50);
//Создаем меню
//Заносим в меню наши ячейки
CCMenu * menu = [CCMenu menuWithItems:image, font, nil];
//Распологаем по центру
menu.position = ccp(size.width /2 , size.height/2);
//Добавляем наше меню
[self addChild:menu];
меню cocos2d является альтернативой кнопок iPhone SDK, здесь мы рассмотрели 2 вида ячеек(картинка и надпись), как видете они ссылаются на некие методы, в нашем случае это переходы на другие слои:
-(void)perehod_v_igru
{
//Заменяем слой главного меню на слой самой игры
[[CCDirector sharedDirector] replaceScene:[CCTransitionPageTurn transitionWithDuration:1
scene:[Game node]]];
}
CCTransition
отвечает за эффект перехода с одного слоя на другой в течении определенного времени.-(void)options
{
//Накладываем слой опции на текущий
[[CCDirector sharedDirector] pushScene:[Options node]];
}
В этом случае
pushScene
применяется для временного наложения слоя.Создаем файлы Options, нажимаем команд + N:
как видно на последнем скриншоте мы создает кастомный слой, по умолчанию он черный, но поигравшись в RGB вы можете поставить любой цвет.
Далее создаем CCMenu и метод возвращающий обатно в главно меню:
-(id) init {
//В RGB можем настроить цвет слоя
if ((self = [super initWithColor:ccc4(255, 0, 0, 155)])) {
CGSize size = [[CCDirector sharedDirector] winSize];
CCMenuItemFont * font = [CCMenuItemFont itemFromString:@"В МЕНЮ" target:self
selector:@selector(backItem)];
font.position = ccp(0, 0);
CCMenu * menu = [CCMenu menuWithItems: font, nil];
menu.position = ccp(size.width /2 , size.height/2);
[self addChild:menu];
}
return self;
}
-(void)backItem{
//Переходим обратно в главное меню
[[CCDirector sharedDirector] popScene];
}
popScene убирает текущий слой. Будьте осторожны под этим слоем должен быть любой другой, как писалось выше, мы именно накладываем слой, в противном случае выдаст ошибку.
Далее создаем слой Game:
Создаем задний фон и ставим задержку перед созданием другого спрайта в файле Game.m:
-(id) init
{
if( (self=[super init])) {
CGSize size = [[CCDirector sharedDirector] winSize];
//Создаем background
CCSprite * background = [CCSprite spriteWithFile:@"clean bg.png"];
//anchorPoint это точка от которой происходят манипуляции со спрайтом, по умолчанию
//background.anchorPoint = ccp(0.5f,0.5f); все манипуляции происходят в середине спрайта
//в нашем случае я поставил anchorPoint = ccp(1, 1); все манипуляции начинаются с правого
// верхнего угла, при (0, 0) левый нижний угол
background.anchorPoint = ccp(1, 1);
background.position = ccp(size.width, size.height);
[self addChild:background z:-1];
//Создадим спрайт после задержки в 0,5 секунды
[self performSelector:@selector(sozdanie_CCSprite) withObject:self afterDelay:0.5];
}
return self;
}
здесь я применил anchorPoint, далее увидим его реальное применение:
-(void)sozdanie_CCSprite
{
//Впринцепе так же делается как и background
CCSprite * tarakan = [CCSprite spriteWithFile:@"tarakan0.png"];
tarakan.position = ccp(512, 100);
tarakan.anchorPoint = ccp(0,0);
[self addChild:tarakan];
//Actions
//Отвечает за смещение на определеное количество пикселей за определеный промежуток времени
id move = [CCMoveBy actionWithDuration:2 position:ccp(0, 500)];
//Отвечает за ускорение и замедление
id accel = [CCEaseInOut actionWithAction:move rate:5];
//Действие вращения
id rotate = [CCRotateBy actionWithDuration:2.0f angle:360];
//Запускаем движение
[tarakan runAction:[CCSequence actions:accel, rotate, nil]];
//Запустим анимацию
[self performSelector:@selector(animation) withObject:self afterDelay:3.5];
}
здесь мы применяем разные действия над тараканом. Когда скомпилируем и увидем, что таракан двигается с ускорением, а потом вращается, при этом точка вращения левый нижний угол, это и есть тот anchorPoint которому мы указали (0, 0). Мы указали движение таракана, за перемещение отвечает CCMoveBy, за плавность ускорения и замедления во время перемещения отвечает CCEaseInOut, за вращение CCRotateBy. Так же мы тут видим применение CCSequence, эта команда применяется для того, что бы действия над спрайтом шли по очереди.
И последнее, создаем анимацию после задержки:
-(void)animation {
CGSize size = [[CCDirector sharedDirector] winSize];
//Указываем plist с кадрами и картинку с текстурами
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"tarakan.plist"
textureFile:@"tarakan.png"];
//CCSpriteBatchNode это особый класс в cocos2d, который может выступать в качестве родителя
//к целому ряду спрайтов
//Его используют для экономии памяти в проекте
CCSpriteBatchNode * bowSheet = [CCSpriteBatchNode batchNodeWithFile:@"tarakan.png"];
NSString *topbird = @"tarakan";
NSMutableArray *walkAnimFrames = [NSMutableArray array];
//Прогоняем кадры в цикле
for(int i = 1; i <= 4; ++i) {
CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName: topbird stringByAppendingString:[
NSString stringWithFormat:@"%d.png", i]]];
[walkAnimFrames addObject:frame];
}
//Создаем анимацию в которой кадры меняются за определеный промежуток времени
CCAnimation *walkAnim = [CCAnimation animationWithFrames:walkAnimFrames delay:0.1f];
NSString *bowFrame = [topbird stringByAppendingString:@"1.png"];
//Создаем спрайт с первым кадром
CCSprite * bow = [CCSprite spriteWithSpriteFrameName:bowFrame];
bow.position = ccp(size.width/2 , -100);
[bowSheet addChild:bow];
//CCAnimate присваевает имена спрайтов CCAnimation
//Создаем действие из анимации и выделяем память под CCAnimate
CCAnimate * bowAnim = [[CCAnimate actionWithAnimation:walkAnim restoreOriginalFrame:YES]
retain];
[self addChild:bowSheet];
//Создаем повторяемое действие
id walkAction = [CCRepeat actionWithAction:bowAnim times:5];
//Создаем движение
id da = [CCMoveBy actionWithDuration:2 position:ccp(0, 600)];
//Применяем одновремено все действия спрайту
[bow runAction:[CCSpawn actions:da, walkAction, nil]];
}
большую часть я прокомментировал, добавлю что текстуру я создавал с помощью zwoptexapp.com, это бесплатно, там я получил plist и png файлы, перетащил их в проект. Так выглядит
tarakan.plist
файл:а так
tarakan.png
файл:Так же видно, при применении действия вместо CCSequence, применили CCSpawn, эта команда применяется для того, что бы действия над спрайтом шли одновременно.
Часто вижу на форумах проблемы с созданием анимации на cocos2d, поэтому включил её в эту статью. Надеюсь эта статья будет кому-то полезна.
Проект можно скачать здесь.