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

时间：2023-03-09 17:58:40
【cocos2d-x 手游研发----界面UI设计】

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

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

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

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

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

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

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

BaseUI.cpp ， BaseUI.h 类

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

　　 ui_exp = BaseUI::create(p_expbd);

    ui_exp ->setPosition(ccp(,ui_exp->getContentSize().height+));

    layer->addChild(ui_exp,);

    ui_skillbar = BaseUI::create(p_skillbarbd);

    ui_skillbar ->setPosition(ccp(size.width-ui_skillbar->getContentSize().width+,ui_skillbar->getContentSize().height));

    layer->addChild(ui_skillbar,);

    ui_skill_skill0 = BaseUI::create(p_skill_nv0);

    ui_skill_skill0 ->setPosition(ccp(size.width-ui_skill_skill0->getContentSize().width+,ui_skill_skill0->getContentSize().height+));

    layer->addChild(ui_skill_skill0,,);

我们需要通过触摸点击去识别判断我们的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()->getPosition();

        int attck_reatR = ;

        int nowtag = -;

        CCPointArray* attck_pointlist = CCPointArray::create();

        for (int i = ; i < ; i++)

        {

            CCRect* attck_rect = new CCRectMake(this->getChildByTag()->getPosition().x-attck_reatR/,this->getChildByTag()->getPosition().y-attck_reatR/,attck_reatR,attck_reatR);

            if(this->getChildByTag(+i)!=NULL)

            {

                if(attck_rect->containsPoint(this->getChildByTag(+i)->getPosition())==true)

                {

                    CCLog(FontChina::G2U("在主角攻击范围"));

                    attck_pointlist->addControlPoint(this->getChildByTag(+i)->getPosition());

                    nowtag=+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(),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()),,,);

                this->addChild(role_skill->effects_main,,);

                role_skill->release();

                SpiritsMonster::showattcknumber(,(CCSprite*)this->getChildByTag(nowselecttag));

        }

        else

        {

            if(attck_pointlist->count()>)

            {

                //攻击默认怪物

                CCPoint attck_point = attck_pointlist->getControlPointAtIndex();

                //该技能是否先移动一定距离，再进行攻击，还是直接释放魔法攻击

                basedatas = new GetNPCData();

                basedatas->GetRoleData();

                basedatas->role_player.acttodo=attack;

                SpiritsPlayer::attckTomap_dir(ccp(attck_point.x,attck_point.y),(CCSprite*)this->getChildByTag(),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()),,,);

                this->addChild(role_skill->effects_main,,);

                role_skill->release();

                SpiritsMonster::showattcknumber(,(CCSprite*)this->getChildByTag(nowtag));

            }

        }

        touch_skill0_flag=false;

    }

}

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

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

相关文章