Cocos2D-X UI基本教程：UI技能冷却按键

作者:课课家教育更新于： 2019-04-19 16:53:19

　　我们在玩游戏时经常出看到这样的情形，技能使用后无法再次点击使用，并且技能图片显示冷却速度，这是怎么做到的呢？本篇教程为你揭秘Cocos2d-x中如何实现上述游戏功能。

　　技能冷却的效果跟魔兽世界中的技能冷却类似，功能如下:

　　技能图标点击时会有按下效果，抬起后开始冷却计时，冷却计时技术后该图标才可以再次进行点击。

　　对应的图片资源：

　　注意:添加child时要注意上下层

　　最下方是CCMenuItemImage 按钮图片

　　其次是模版图片 半透明模版图片

　　最上方是CCProgressTimer 图片是最下图中较大的那个盾牌图片

　　这是使用的图片资源

 

 

 

　　动画原理：

　　非冷却状态时只显示CCMenuItemImage，当冷却开始计时时，将按钮设为不可点击状态，同将半透明模板和进度条精灵设置为可见状态，并且进度条精灵开始进行旋转动作，旋转结束后在回调函数中将半透明模板和进度条精灵设为不可见，按钮重新设置为可点击状态。

　　使用方法：

　　创建一个SkillButton指针，修改冷却时间，动画表现(如蒙板从旋转改为竖直方向)，并将SkillButton添加到layer上即可。

　　传个效果图

　　SkillButton.h

　　/**

　　实现技能冷却效果

　　Notice:添加child时要注意上下层关系

　　最下方是按钮 其次是半透明的模版图片 最上方是CCProgressTimer进度条精灵

　　*/

　　#ifndef _SKILLBUTTON_H_

　　#define _SKILLBUTTON_H_

　　#include

　　class SkillButton : public cocos2d::CCNode

　　{

　　public:

　　SkillButton();

　　virtual ~SkillButton();

　　/** 创建一个SkillButton对象

　　*/

　　static SkillButton* createSkillButton(float cdTime,

　　const char* stencil_file_name,

　　const char* button_normal_name,

　　const char* button_click_name);

　　/** CD时间设置

　　*/

　　void setCDTime(float time) { mCDTime = time; }

　　float getCDTime() const { return mCDTime; }

　　/** 技能按钮点击回调 */

　　void skillClickCallBack(cocos2d::CCObject* obj);

　　/** 技能冷却完毕回调*/

　　void skillCoolDownCallBack(cocos2d::CCNode* node);

　　private:

　　/** 初始化 */

　　bool init(float cdTime, const char* stencil_file_name, const char* button_normal_name, const char* button_click_name);

　　private:

　　cocos2d::CCMenuItemImage* mItemSkill; // 技能按钮

　　cocos2d::CCMenu* mMenuSkill; // 技能按钮所在menu

　　cocos2d::CCSprite* mStencil; // 蒙板精灵,黑色半透明(这个是为了显示一个冷却计时效果)

　　cocos2d::CCProgressTimer* mProgressTimer; // 时间进度条精灵(360度旋转)

　　float mCDTime; // CD时间

　　};

　　#endif

　　SkillButton.cpp

　　#include "SkillButton.h"

　　USING_NS_CC;

　　SkillButton::SkillButton():

　　mItemSkill(NULL),

　　mMenuSkill(NULL),

　　mStencil(NULL),

　　mProgressTimer(NULL),

　　mCDTime(1.f)

　　{

　　}

　　SkillButton::~SkillButton()

　　{

　　}

　　SkillButton* SkillButton::createSkillButton(float cdTime, const char* stencil_file_name, const char* button_normal_name, const char* button_click_name)

　　{

　　SkillButton* skillButton = new SkillButton();

　　if (skillButton && skillButton->init(cdTime, stencil_file_name, button_normal_name, button_click_name))

　　{

　　skillButton->autorelease();

　　return skillButton;

　　}

　　else

　　{

　　delete skillButton;

　　skillButton = NULL;

　　}

　　return NULL;

　　}

　　bool SkillButton::init(float cdTime, const char* stencil_file_name, const char* button_normal_name, const char* button_click_name)

　　{

　　CCAssert(stencil_file_name, "SkillButton::init stencil_file_name != NULL");

　　CCAssert(button_normal_name, "SkillButton::init button_normal_name != NULL");

　　CCAssert(button_click_name, "SkillButton::init button_click_name != NULL");

　　// Notice:添加child时要注意上下层

　　// 最下方是CCMenuItemImage 其次是模版图片 最上方是CCProgressTimer

　　// 添加技能按钮

　　mItemSkill = CCMenuItemImage::create(button_normal_name, button_click_name, this, menu_selector(SkillButton::skillClickCallBack));

　　mItemSkill->setPosition(CCPointZero);

　　mMenuSkill = CCMenu::create(mItemSkill, NULL);

　　mMenuSkill->setPosition(CCPointZero);

　　addChild(mMenuSkill, -100);

　　// 添加阴影模版

　　mStencil = CCSprite::create(stencil_file_name);

　　mStencil->setPosition(CCPointZero);

　　mStencil->setVisible(false);

　　addChild(mStencil);

　　// 添加旋转进度条精灵

　　CCSprite* progressSprite = CCSprite::create(button_normal_name);

　　mProgressTimer = CCProgressTimer::create(progressSprite);

　　mProgressTimer->setPosition(CCPointZero);

　　mProgressTimer->setVisible(false);

　　addChild(mProgressTimer, 100);

　　mCDTime = cdTime;

　　return true;

　　}

　　/** 技能按钮点击回调 */

　　void SkillButton::skillClickCallBack(cocos2d::CCObject* obj)

　　{

　　// 冷却计时，即时状态技能按钮不可点击

　　mItemSkill->setEnabled(false);

　　// 模版可见

　　mStencil->setVisible(true);

　　// 设置精灵进度条为顺时针

　　mProgressTimer->setVisible(true);

　　mProgressTimer->setType(kCCProgressTimerTypeRadial);

　　//准备一个5秒旋转360度的动画(逐渐覆盖半透模板形成冷却效果;这里进行计时冷却动画的实现和时间控制)

　　CCActionInterval* action_progress_to = CCProgressTo::create(mCDTime, 100);

　　CCCallFunc* action_callback = CCCallFuncN::create(this, callfuncN_selector(SkillButton::skillCoolDownCallBack));

　　mProgressTimer->runAction(CCSequence::create(action_progress_to, action_callback, NULL));

　　}

　　/** 技能冷却完成回调 */

　　void SkillButton::skillCoolDownCallBack(CCNode* node)

　　{

　　// 设置蒙板不可见

　　mStencil->setVisible(false);

　　// 进度条技能不可见

　　mProgressTimer->setVisible(false);

　　// 按钮置为可用

　　mItemSkill->setEnabled(true);

　　}

　　测试代码：

　　mSkillButton = SkillButton::createSkillButton(2.f, "stencil.png", "normal.png", "click.png");

　　mSkillButton->setPosition(ccp(s.width/2, s.height/2));

　　addChild(mSkillButton);