CocoStuido sample----SampleUIAnimation源代码地址
https://github.com/chukong/CocoStudioSamples
大家可以预先下载这个源代码, 等下要用到里面的图片资源哦
一 目标
在本教程里, 我们学习下UI动画的制作, 点击下按钮会执行UI动画.
我们使用的cocos2d-x的版本是2.2.2, CocoStudio的版本是1.2.0.1. 不同的版本, 功能上会有差异, 大家学习时, 最好采用对应的版本.
二 创建项目并导入资源
大家可以在下载到的源代码的SampleUIAnimation\SampleUIAnimation_editor\Resources 目录下找到我们需要的资源.
我们首先打开UI编辑器, 并创建一个新的项目.
然后大家可以在资源面板点击导入文件按钮, 导入这些资源文件, 导入后的资源面板如下.
三 构建界面
我们在UI编辑器的普通模式下, 分别拖入一个按钮控件和图片控件.
选中按钮控件, 并从菜单 “视图”=>“属性"中打开属性面板, 我们修改下按钮控件的各项属性.
勾选交互, 名字命名为"TextButton”, 文本修改为"start anim", 我们还需要为按钮设置点击时的图片.
将正常状态, 禁用状态设置为"backtotopnormal.png", 按下状态设置为"backtotoppressed.png". 设置的方法, 可以把图片从资源面板拖入对应框即可.
如下图所示.
同样, 我们设置下图片控件各属性. 名字为"ImageView", 文件为"CocoStudio_UIEditor.png"即可.
我们还可以在渲染区拖动下按钮, 图片控件到合适的位置.
四 制作动画
好, 现在让我们开始制作动画吧.
在动作列表面板点击右键, 选择"添加动画", 我们得到了"Animation0"的动画. 双击该动画名, 可以重命名. 我们这里将其重命名为"Animation1".
接下来我们为动画添加第一个关键帧.
在渲染区选中图片控件, 在控件上点击右键, 选择编辑动画(快捷键Ctrl+M). 这时ImageView就被加入到了关键帧的对象列表中.
选中ImageView, 然后点击添加关键帧面板中的添加关键帧按钮, 我们就为ImageView添加了第一个关键帧.
这时我们可以拖过在渲染区选中ImageView, 可以拖动, 缩放, 旋转来给这一帧的ImageView设置状态, 也可以打开属性面板, 来调节其他属性.
然后我们可以拖动下黄色的时间轴游标到新的位置, 然后继续添加新的关键帧, 并设置新的属性.
添加了几个关键帧之后, 点击关键帧面板的播放按钮, 图片控件已经动了起来了! 太棒了!
五 导出资源
用快捷键Ctrl+E打开导出对话框, 选择导出的路径, 按默认配置导出. 我们稍后会用到这些文件.
六 在cocos2d-x工程中添加导出后的资源
想必各位看官都已经熟练掌握了cocos2d-x工程的创建, 我这里就不再啰嗦了.
创建完工程之后, 需要将我们上面用CocoStudio导出的几个文件拷贝到cocos2d-x工程的Resources文件夹下.
七 代码实现
我们在工程中添加一个CocosGUIExamplesUIAnimationScene的类, 我们先来看下CocosGUIExamplesUIAnimationScene.h类的声明部分.
//添加头文件#include “cocos2d.h”#include “cocos-ext.h”
//使用命名空间USING_NS_CC;USING_NS_CC_EXT;using namespace gui;
//从CCScene派生class CocosGUIExamplesUIAnimationScene : public CCScene{public: virtual void onEnter(); virtual void onExit(); protected: void menuCloseCallback( CCObject* pSender, TouchEventType type);//响应关闭按钮回调 void UIAnimationInit(); //初始化 void startUIAnimation( CCObject* pSender, TouchEventType type);// protected: UILayer* m_pUILayer; //layer对象};
我们再来看下CocosGUIExamplesUIAnimationScene.cpp, 类的实现部分.
#include “CocosGUIExamplesUIAnimationScene.h”
void CocosGUIExamplesUIAnimationScene ::onEnter(){ CCScene::onEnter(); m_pUILayer = UILayer::create(); m_pUILayer->scheduleUpdate(); addChild(m_pUILayer); //初始化 UIAnimationInit(); //添加退出按钮 UIButton* exit_button = UIButton::create(); exit_button->setTouchEnabled( true); exit_button->loadTextures( “CloseNormal.png”, “CloseSelected.png” , “” ); exit_button->setPosition( ccp(m_pUILayer->getContentSize().width - exit_button->getContentSize().width, exit_button->getContentSize().height)); exit_button->addTouchEventListener( this, toucheventselector(CocosGUIExamplesUIAnimationScene ::menuCloseCallback)); //添加关闭按钮点击事件 m_pUILayer->addWidget(exit_button);}
//退出时清理资源void CocosGUIExamplesUIAnimationScene ::onExit(){ m_pUILayer->removeFromParent(); SceneReader::sharedSceneReader()->purge(); GUIReader::shareReader()->purge(); cocos2d::extension:: ActionManager::shareManager()->purge(); CCScene::onExit();}
//响应关闭按钮点击事件void CocosGUIExamplesUIAnimationScene ::menuCloseCallback(CCObject* pSender, TouchEventType type ){ if (type == TOUCH_EVENT_ENDED) { CCDirector::sharedDirector()->end(); #if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS ) exit(0);#endif }}
void CocosGUIExamplesUIAnimationScene ::UIAnimationInit(){ //加载编辑器导出的资源 Layout* uianimation_root = dynamic_cast<Layout >(GUIReader ::shareReader()->widgetFromJsonFile(“cocosgui/gui_examples/SampleUIAnimation/SampleUIAnimation.json”)); m_pUILayer->addWidget(uianimation_root); //获取点击按钮 UIButton button = static_cast<UIButton >(m_pUILayer->getWidgetByName(“TextButton”)); //设置按钮点击事件响应 button->addTouchEventListener( this, toucheventselector(CocosGUIExamplesUIAnimationScene ::startUIAnimation));}
void CocosGUIExamplesUIAnimationScene ::startUIAnimation(CCObject pSender, TouchEventType type ){ if (type == TOUCH_EVENT_ENDED) //当点击结束时 { //播放动画Animation1 cocos2d::extension:: ActionManager::shareManager()->playActionByName(“SampleUIAnimation.json” , “Animation1” ); }}
然后我们在AppDelegate.cpp中, 添加引用.
#include “CocosGUIExamplesUIAnimationScene.h”
修改AppDelegate::applicationDidFinishLaunching函数, 使用CocosGUIExamplesUIAnimationScene启动.
CocosGUIExamplesUIAnimationScene *pScene = new CocosGUIExamplesUIAnimationScene (); pScene->autorelease(); pDirector->runWithScene(pScene);
好啦, 快运行下吧!