【cocos2d-x 手游研发----界面UI设计】

简单探讨一下如何在cocos2d-x的游戏引擎里面去制作各做交互UI界面，常见的UI如下：

人物头像，血条值，经验条，技能按钮，以及各种玩家交互的界面按钮：背包，人物属性，门派，等；

类似上面的图示交互UI，他们是悬浮于窗体上的。那么按照我现在做的层级架构就是这些UI操作，是不属于任何CCObject的，或者被继承的；

回到第一篇我对整个架构的分析，这些交互UI属于事件，和任务类型！对于手游UI来说这类似的UI设计更为严格，因为玩家位移的交互方式，

就是点击屏幕，我们要虚拟化各种按键去实现各种操作。

先把以上描述的基本UI在界面上画出来：

BaseUI.cpp ， BaseUI.h 类

　　 ui_exp = BaseUI::create(p_expbd);
    ui_exp ->setPosition(ccp(150,ui_exp->getContentSize().height+20));
    layer->addChild(ui_exp,1);

    ui_skillbar = BaseUI::create(p_skillbarbd);
    ui_skillbar ->setPosition(ccp(size.width-ui_skillbar->getContentSize().width+35,ui_skillbar->getContentSize().height));
    layer->addChild(ui_skillbar,3);

    ui_skill_skill0 = BaseUI::create(p_skill_nv0);
    ui_skill_skill0 ->setPosition(ccp(size.width-ui_skill_skill0->getContentSize().width+7,ui_skill_skill0->getContentSize().height+22));
    layer->addChild(ui_skill_skill0,1,801);

我们需要通过触摸点击去识别判断我们的UI坐标是否被用户点击：

 

CCRect BaseUI::rect_skill0()
{
    //获取精灵区域大小
    return CCRectMake(ui_skill_skill0->getPositionX()- ui_skill_skill0->getContentSize().width  * ui_skill_skill0->getAnchorPoint().x,ui_skill_skill0->getPositionY()-ui_skill_skill0->getContentSize().height* ui_skill_skill0->getAnchorPoint().y,ui_skill_skill0->getContentSize().width, ui_skill_skill0->getContentSize().height); 

}

void BaseUI::isTouchInside(CCTouch *pTouch)
{ 

    CCPoint localPoint = pTouch->getLocation();
    CCRect rc = rect_skill0();
    bool isTouched = rc.containsPoint(localPoint);
    if (isTouched == true) {
        CCLog(FontChina::G2U("1111111111111111111！"));
        if(touch_skill0_flag!=true)
        {
            touch_skill0_flag = true;
        }
    }
}

我们设置了变量如：技能的变量（touch_skill0_flag）来在其他地方去实现技能释放，执行释放操作的的关联是在baseMap上面，因为之前我们的逻辑关系上，玩家是属于地图层级，那么我们便可以很方便的去控制玩家释放技能对怪物的操作交互；

//启动玩家操作监听器
nowmap->schedule(schedule_selector(Maps_Diyu::makeroleAttack)); 

让在地图层上面我们需要启动监听器去实现技能得操作，那么我们就如下去写：

void Maps_Diyu::makeroleAttack(float times)  
{  
    if(touch_skill0_flag==true)
    {
        //先去寻找主角周围的敌人，选择最近的一个为目标；
        CCPoint playerpoint =  this->getChildByTag(999)->getPosition();
        int attck_reatR = 200;
        int nowtag = -1;
        CCPointArray* attck_pointlist = CCPointArray::create(0);
        for (int i = 0; i < 15; i++)
        {
            CCRect* attck_rect = new CCRectMake(this->getChildByTag(999)->getPosition().x-attck_reatR/2,this->getChildByTag(999)->getPosition().y-attck_reatR/2,attck_reatR,attck_reatR);
            if(this->getChildByTag(100+i)!=NULL)
            {
                if(attck_rect->containsPoint(this->getChildByTag(100+i)->getPosition())==true)
                {
                    CCLog(FontChina::G2U("在主角攻击范围"));
                    attck_pointlist->addControlPoint(this->getChildByTag(100+i)->getPosition());
                    nowtag=100+i;
                    break;
                }
            }
        }
        if(nowselects==true)
        {
                //攻击默认怪物
                CCPoint attck_point = this->getChildByTag(nowselecttag)->getPosition();
                basedatas = new GetNPCData();
                basedatas->GetRoleData(); 
                basedatas->role_player.acttodo=attack;
                SpiritsPlayer::attckTomap_dir(ccp(attck_point.x,attck_point.y),(CCSprite*)this->getChildByTag(999),basedatas->role_player);
                SkillEffects* role_skill = new SkillEffects(ccp((int)attck_point.x,(int)attck_point.y),basedatas->role_player,(0.2f+CCRANDOM_0_1()),12,3,0);
            
                this->addChild(role_skill->effects_main,1000,50);
                role_skill->release();
                SpiritsMonster::showattcknumber(899,(CCSprite*)this->getChildByTag(nowselecttag));
        }
        else
        {
            if(attck_pointlist->count()>0)
            {
                //攻击默认怪物
                CCPoint attck_point = attck_pointlist->getControlPointAtIndex(0);
                //该技能是否先移动一定距离，再进行攻击，还是直接释放魔法攻击
                basedatas = new GetNPCData();
                basedatas->GetRoleData(); 
                basedatas->role_player.acttodo=attack;
                SpiritsPlayer::attckTomap_dir(ccp(attck_point.x,attck_point.y),(CCSprite*)this->getChildByTag(999),basedatas->role_player);
                SkillEffects* role_skill = new SkillEffects(ccp((int)attck_point.x,(int)attck_point.y),basedatas->role_player,(0.2f+CCRANDOM_0_1()),12,3,0);
                
                this->addChild(role_skill->effects_main,1000,50);
                role_skill->release();
                SpiritsMonster::showattcknumber(899,(CCSprite*)this->getChildByTag(nowtag));
            }
        }
        touch_skill0_flag=false;
    }

}  

上面的写法，又再一次利用了怪物AI里面的一些基本逻辑，不过这套逻辑是需要玩家去手动触发的；

 

我建了一个QQ群：和大家一起分享cocos2dx开发经验【41131516】