横版游戏制作之英雄技能CD遮罩,人物头像血条属性

 

上图就是技能CD的一个效果，在此我需要给介绍下，cocosStuido这个工具中的UI Eidtor功能，编辑UI真的是很方便，至于怎么使用它，我相信您可以随便看看网上的东西，自己摸索，参考接下来的代码就知道了

在UI编辑器中，我们的技能是没有CD遮罩效果的，那怎么实现的呢？

答案就是：在点击触摸技能时，我们在技能的上方覆盖一张灰色的图片(这个你可以用PS去制作一张),大小与技能图标相同，然后根据每个技能的CD时间，产生一个扇形进度动画，动画结束后取消定时器跟这个遮罩对象就可以了

至于人物头像的血条，我想基本不用介绍你都可以知道怎么去用，so easy

以下是OptionLayer操作层中的init()初始化处理以及触摸监听处理，和技能遮罩效果处理

如果您只想看如何处理，请直接参考第三段代码

//init()

bool OptionLayer::init(){
    this->setTouchEnabled(true);//开启触摸
    //添加摇杆
    CCTexture2D* ControlWheelTexture = CCTextureCache::sharedTextureCache()->addImage("MyImages/ControlWheel.png");
    DirectionControlButton* ControlWheelSprite = DirectionControlButton::ObjectWithTexture(ControlWheelTexture);//加载摇杆背景图 
    ControlWheelSprite->setPosition(ccp(ControlWheelSprite->getContentSize().width/2, ControlWheelSprite->getContentSize().height/2));
    this->addChild(ControlWheelSprite,1);

    //加载摇杆小圈  
    CCTexture2D *TinyCircleTexture = CCTextureCache::sharedTextureCache()->addImage("MyImages/TinyCircle.png");
    CCSprite *TinyCircleSprite = CCSprite::createWithTexture(TinyCircleTexture);    
    TinyCircleSprite->setPosition(ccp(ControlWheelSprite->getContentSize().width/2, ControlWheelSprite->getContentSize().height/2));  
     this->addChild(TinyCircleSprite,2);  
     ControlWheelSprite->setTinyCircleSprite(TinyCircleSprite);        //设置触摸后的小圆圈
     this->setDirectionCrtl(ControlWheelSprite);        //设置操作层摇杆对象，方便在场景Init中使用

     //人物属性UI加载
    TouchGroup* ul =TouchGroup::create();
    ul->setTag(200);
    ul->setPosition(-40,450);
    this->addChild(ul);
    ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("RoleProperty/DemoHead_UI.json"));
    UILoadingBar * redBar = dynamic_cast<UILoadingBar *>(ul->getWidgetByTag(4));
    UILoadingBar * blueBar = dynamic_cast<UILoadingBar *>(ul->getWidgetByTag(16));
    UIImageView * head = dynamic_cast<UIImageView *>(ul->getWidgetByTag(42));
    UITextField * level = dynamic_cast<UITextField *>(ul->getWidgetByTag(26));
    this->setRedBar(redBar);
    this->setBlueBar(blueBar);
    this->setHead(head);
    this->setLevel(level);

     //开始加载操作技能UI
    TouchGroup* skillUI =TouchGroup::create();
    skillUI->setTag(201);
    skillUI->setPosition(800,10);
    CCLog("ScreenSize.height = %f", CCDirector::sharedDirector()->getVisibleSize().height);
    CCLog("ScreenSize.width = %f",ScreenSize.width);
    this->addChild(skillUI);
    skillUI->addWidget(GUIReader::shareReader()->widgetFromJsonFile("Skill_UI/Skill_UI.json"));

    UIImageView * skill_attack = dynamic_cast<UIImageView *>(skillUI->getWidgetByTag(9));            //普通攻击
    UIImageView * skill_attack_1 = dynamic_cast<UIImageView *>(skillUI->getWidgetByTag(6));        //特殊攻击1
    UIImageView * skill_attack_2 = dynamic_cast<UIImageView *>(skillUI->getWidgetByTag(8));        //特殊攻击2
    UIImageView * skill_attack_3 = dynamic_cast<UIImageView *>(skillUI->getWidgetByTag(7));        //特殊攻击3
    UIImageView * blood_bottle = dynamic_cast<UIImageView *>(skillUI->getWidgetByTag(10));//血瓶
    UIImageView * magic_bottle = dynamic_cast<UIImageView *>(skillUI->getWidgetByTag(11));//魔瓶
    UILabelAtlas * blood_bottle_num = dynamic_cast<UILabelAtlas *>(skillUI->getWidgetByTag(12));//血瓶数量
    UILabelAtlas * magic_bottle_num = dynamic_cast<UILabelAtlas *>(skillUI->getWidgetByTag(13));//魔瓶数量

    //初始化类成员变量
    this->setSkillUI(skillUI);
    this->setSkill_attack(skill_attack);
    this->setSkill_attack_1(skill_attack_1);
    this->setSkill_attack_2(skill_attack_2);
    this->setSkill_attack_3(skill_attack_3);
    this->setBlood_bottle(blood_bottle);
    this->setMagic_bottle(magic_bottle);
    this->setBlood_bottle_num(blood_bottle_num);
    this->setMagic_bottle_num(magic_bottle_num);

    //防止init()完自动释放对象
    skillUI->retain();
    skill_attack->retain();
    skill_attack_1->retain();
    skill_attack_1_cool->retain();
    skill_attack_2->retain();
    skill_attack_2_cool->retain();
    skill_attack_3->retain();
    skill_attack_3_cool->retain();
    blood_bottle->retain();
    magic_bottle->retain();
    blood_bottle_num->retain();
    magic_bottle_num->retain();

    //添加技能图标的触摸监听
    skill_attack->addTouchEventListener(skill_attack_1,toucheventselector(OptionLayer::touchEventHandler));
    skill_attack_1->addTouchEventListener(skill_attack_1,toucheventselector(OptionLayer::touchEventHandler));
    skill_attack_2->addTouchEventListener(skill_attack_1,toucheventselector(OptionLayer::touchEventHandler));
    skill_attack_3->addTouchEventListener(skill_attack_1,toucheventselector(OptionLayer::touchEventHandler));
    //添加物品触摸监听
    blood_bottle->addTouchEventListener(blood_bottle,toucheventselector(OptionLayer::touchEventHandler));
    magic_bottle->addTouchEventListener(magic_bottle,toucheventselector(OptionLayer::touchEventHandler));
    //开启技能触摸
    skill_attack_1->setTouchEnabled(true);
    skill_attack_2->setTouchEnabled(true);
    skill_attack_3->setTouchEnabled(true);
    skill_attack->setTouchEnabled(true);
    //开启物品触摸
    blood_bottle->setTouchEnabled(true);
    magic_bottle->setTouchEnabled(true);
    
    return true;
}

//................监听处理函数........

void OptionLayer::touchEventHandler(CCObject* pSender,TouchEventType type) 
{ 
    UIImageView* target = (UIImageView*)pSender; 
    OptionLayer *optionLayer = global->optionLayer;
    ActionState actionState = global->hero->getActionState();
    //角色上一个技能动画未执行完，禁止执行下一攻击动作(actionState 由该状态决定，任何技能动画播放完状态都还原为ActionStateNone，参考Role类动画回调函数Role::callBackAction()
    if (type == TOUCH_EVENT_BEGAN) 
    { 
        if(target == optionLayer->getSkill_attack() || target == optionLayer->getSkill_attack_1() 
            || target == optionLayer->getSkill_attack_2() || target == optionLayer->getSkill_attack_3()){
                //当触摸技能时，只有角色在ActionStateNone，ActionStateIdle状态才响应处理
                if(actionState == ActionStateNone || actionState == ActionStateIdle){
                    skillCoolHandler(pSender);
             }
        }else{
                skillCoolHandler(pSender);
        }
    } 
    if (type == TOUCH_EVENT_MOVED) 
    { 
        //nothing to do
    } 
    if (type == TOUCH_EVENT_ENDED) 
    { 
       // nothing to do
    } 
} 

//......................................关键点 技能CD遮罩处理来了...........................

void OptionLayer::skillCoolHandler(CCObject* pSender)
{
    OptionLayer *optionLayer = global->optionLayer;
     UIImageView* skillView = (UIImageView*)pSender;
     global->hero->setAllowMove(false);//动画执行期间角色不可移动
     float SumCD = 10.0f;
    //判断指向对象是否相等来初始化cd时间
     if(optionLayer->getSkill_attack_1() == skillView){
            SumCD = optionLayer->skill_SumCD_1;
            global->hero->RunAttackAction_1();        //执行特殊攻击1动画
    }else if(optionLayer->getSkill_attack_2() == skillView){
            SumCD = optionLayer->skill_SumCD_2;
    }else if(optionLayer->getSkill_attack_3() == skillView){
            SumCD = optionLayer->skill_SumCD_3;
    }else if(optionLayer->getSkill_attack() == skillView){
            SumCD = optionLayer->skill_SumCD_0;
            global->hero->RunAttackAction();        //执行普通攻击动画
    }else if(optionLayer->getBlood_bottle() == skillView){
            SumCD = optionLayer->blood_SumCD;
    }else if(optionLayer->getMagic_bottle() == skillView){
            SumCD = optionLayer->magic_SumCD;
    }    
    skillView->setTouchEnabled(false);        //CD开始，禁止本技能使用
    //初始化 cd遮罩
    CCTexture2D *spriteTx = CCTextureCache::sharedTextureCache()->addImage("Skill_UI/cooling_cover.png");
    CCSprite * SkillCover = CCSprite::createWithTexture(spriteTx);
    CCProgressTimer *skillTimer  = CCProgressTimer::create(SkillCover);
    skillTimer->setOpacity(125);                            //透明度
    skillTimer->setPosition(skillView->getPosition());//将进度遮罩设置在技能图标位置上
    optionLayer->getSkillUI()->addChild(skillTimer);
    
    skillTimer->setType(kCCProgressTimerTypeRadial);//扇形
    skillTimer->setPercentage(100);
    skillTimer->setReverseProgress(true);

    CCProgressTo* cdAction=CCProgressTo::create(SumCD, 100);
    CCCallFuncND* func=CCCallFuncND::create(this, callfuncND_selector(OptionLayer::allowToClick),skillView);//附带skillView参数 方便cd结束后处理
    CCFiniteTimeAction* seq=CCSequence::create(cdAction,func,NULL);
    skillTimer->runAction(seq);
}

//技能CD结束后 移除定时器 重新开启触摸
void OptionLayer::allowToClick(CCNode* pSender,void* data){
    UIImageView* skillView = (UIImageView*)data;
    CCProgressTimer* skillTimer = (CCProgressTimer*)pSender; 
    OptionLayer *optionLayer = global->optionLayer;
    optionLayer->getSkillUI()->removeChild(skillTimer);
    skillView->setTouchEnabled(true);
}

 至此，我们的整个过程代码都贴完整了

如果您现在没有看接下来的另外一部分处理，你就会发现，你的技能遮罩是从无到有的扇形动画，这明显不是我们想要的结果，你会发现你怎么都找不到一个成员方法，可以让CCProgressTimer对象能够反过来从有到无的....怎么办呢？

这里我们需要修改下cocos2dx这部分源代码:CCProgressTimer.cpp中

void CCProgressTimer::updateRadial(void)
{
    if (!m_pSprite) {
        return;
    }
    float alpha = m_fPercentage / 100.f;

    //扇形从有到无（这里需要添加这段代码）
    if(alpha != 0.f && alpha !=1.f) {
        alpha = 1.f-alpha;
    }
............................

然后你要的效果就都出来了..................