上一期中最后我分享了我写的一段打开门的动画效果的代码,相信大家也都自己动手尝试了一下,这一期我要和大家分享的是转场动画以及menu按钮的制作(对应入门视频教程中第三课和第四课)。
一、转场动画
要制作转场动画首先需要有一个新的场景(scene),而程序模板给出的HelloWorldScene就是一个场景,因此我们可以仿照它来创建一个自己的场景。
首先在工程中创建一个头文件和对应的cpp文件(此处我新建了一个叫做MenuScene的类作为新场景)
然后仿照HelloWorldScene.h修改了MenuScene.h:
###MenuScene.h###
#include "cocos2d.h"
class MenuScene : public cocos2d::LayerColor
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
void menuCloseCallback(cocos2d::Ref* pSender);
CREATE_FUNC(MenuScene);
MenuScene(void);
~MenuScene(void);
};
相应地,MenuScene.cpp修改如下:
#include "MenuScene.h"
#include "HelloWorldScene.h"
USING_NS_CC;
bool MenuScene::init()
{
if ( !LayerColor::initWithColor(Color4B(0,0,0,255)) )//这里我使用了黑色作为背景色
{
return false;
}
return true;
}
Scene* MenuScene::createScene()
{
auto scene = Scene::create();
auto layer = MenuScene::create();
scene->addChild(layer);
return scene;
}
MenuScene::MenuScene(void)
{
}
MenuScene::~MenuScene(void)
{
}
然后就是仿照上一期的内容,在init()中创建需要显示的图像,这里就不再赘述,接下来讲述如何实现转场。
首先在HelloWorldScene.h中加入转场方法声明:
void animationEnd();
然后在cpp文件中实现它:
void HelloWorld::animationEnd()
{
auto scene = MenuScene::createScene();
auto fade = TransitionFadeTR::create(1.0f, scene);
//auto slide = TransitionSlideInL::create(1.0f, scene);
auto director = Director::getInstance();
director->replaceScene(fade);
}
这里,auto scene = MenuScene::createScene(); 就是定义了一个scene场景,并把MenuScene创建的初始赋给它,以供之后使用。
而auto fade = TransitionFadeTR::create(1.0f, scene); 中TransitionFadeFR是cocos2d-x自带的fade样式的转场动画效果,TR的意思是Top-Right,也就是从左下方向右上方显示转场的动画,相应地你也可以使用up/down/BL(也就是Botton-Left)实现你需要的fade转场效果,当然你也可以用fade以外的效果(可以参考:http://blog.csdn.net/u012510614/article/details/25285615)
然后就在上一期制作的打开门的动画中加入转场代码,这里我们把转场代码加入到左门打开动画的序列(sequence)中:
auto loadScene2 = CallFunc::create(this, callfunc_selector(HelloWorld::animationEnd));
auto loading_seq = Sequence::create(moveLeft, delay, loadScene2, NULL);
leftNode->runAction(loading_seq);
然后你就惊喜的发现你的转场动画生效啦~!我的转场动画效果如下:
二、menu按钮的制作
menu按钮的制作和制作普通的动画以及动画序列的过程非常类似,我们来看一下:
(1) 文本型按钮
首先建立文本标签Label:
auto label1 = Label::create("start","Microsoft YaHei", 50);
label1->setColor(Color3B(255,255,0));
auto label2 = Label::create("exit","Microsoft YaHei", 50);
label2->setColor(Color3B(255,255,0));
Label::create()的参数中,第一个参数是Label的文本内容,第二个参数是字体,第三个参数是字号;
建立好Label文本标签后就利用MenuItemLabel::create(label名称)来将Label变成可以点击的menu按钮:
auto menu1 = MenuItemLabel::create(label1);
menu1->setPosition(Point(400,200));
auto menu2 = MenuItemLabel::create(label2);
menu2->setPosition(Point(400,400));
然后就像动画序列一样,建立一个menu让它包含所有的menu按钮然后addChild让它显示出来:
auto menu = Menu::create(menu1, menu2, NULL);
menu->setPosition(Point(0,0));
this->addChild(menu);
(2)图片型按钮
学会了文本型按钮,你一定想知道图片形式的按钮怎么做呢,和文本型的十分类似,具体如下:
auto startbutton = MenuItemImage::create("startbutton1.png", "startbutton2.png");
startbutton->setAnchorPoint(Point(0.5, 1));
startbutton->setPosition(Point(visibleSize.width/2-200,100));//这里我用了屏幕宽度visibleSize.width/2来设定按钮位置
auto exitbutton = MenuItemImage::create("exitbutton1.png", "exitbutton2.png",);
exitbutton->setAnchorPoint(Point(0.5, 1));
exitbutton->setPosition(Point(visibleSize.width/2+200,100));
auto menu = Menu::create(startbutton, exitbutton, NULL);
menu->setPosition(Point(0,0));
this->addChild(menu);
要注意的是,图片形式的按钮使用的创建指令是MenuItemImage::create("图片1.png", "图片2.png");
其中的“图片1”和“图片2”分别是按钮没有被按下的时候和被按下时的图像(当然,不要忘记先把图片文件导入到工程中哦),如果你想做的按钮要实现有时候是灰色(无法点击)的效果,那么就在“图片2”后面再加上一个无法点击时的图像作为第三个参数即可。
然后你就发现图片形式的按钮也成功显示啦!
(3)点击按钮调用事件
我们已经成功地显示按钮,但是按钮的存在价值是点击的时候调用一个事件,如转场、开始游戏等等,那么接下来我们就为按钮加入事件。
首先在场景的头文件中声明public的事件调用方法:
void clickStart(cocos2d::Object* menuItem);
void clickExit(cocos2d::Object* menuItem);
为了能够显式地说明按钮按下确实调用了事件,我们在头文件里再声明一个Label,当按钮按下时Label中的文字会发生变化:
private:
cocos2d::Label* output;
在cpp中定义并显示Label:
output=Label::create("CWBeta", "LiShu", 80);
output->setAnchorPoint(Point(0.5,0.5));
output->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this->addChild(output);
然后再实现点击按钮调用事件,点击start按钮显示“CWBeta started!”,点击exit按钮显示“CWBeta exited!”:
void MenuScene::clickStart(cocos2d::Object* menuItem)
{
output->setString("CWBeta started!");
}
void MenuScene::clickExit(cocos2d::Object* menuItem)
{
output->setString("CWBeta exited!");
}
好了,我们可以运行一下,发现点击exit按钮时,文字发生了改变:
初始场景:
点击exit按钮不放(这时候按钮是第二张图的效果——变色了)
放开按钮Label文字改变
(4)点击按钮调用转场事件
其实到这一步可以不用看我的教程,自己尝试着写写看,这样又巩固了转场事件的调用,又巩固了按钮的使用,一举两得,而且很容易做到。
首先在MenuScene.h中也加上转场动画声明:
void animationEnd();
然后在cpp中定义:
void MenuScene::animationEnd()
{
auto scene = HelloWorld::createScene();
auto fade = TransitionFadeBL::create(1.0f, scene);
//auto slide = TransitionSlideInL::create(1.0f, scene);
auto director = Director::getInstance();
director->replaceScene(fade);
}
接着如上文所写,按钮事件调用的实现中改为定义转场动画的效果,然后runAction调用转场动画:
void MenuScene::clickStart(cocos2d::Object* menuItem)
{
auto loadScene1 = CallFunc::create(this, callfunc_selector(MenuScene::animationEnd));
runAction(loadScene1);
}
这样就好啦,点击start按钮就会实现转场到HelloWorldScene这个场景:
这就是我这次的学习,大家也学会了吗?O(∩_∩)O