Cocos2D-X UI基本教程：界面UI基础设计

　　我们各位同学们应该都玩过很多种手机游戏了吧，在游戏中有很多漂亮的UI界面都是在游戏开发中设计出来的，本篇教程将带你学习界面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里面的一些基本逻辑，不过这套逻辑是需要玩家去手动触发的。