cocos2d-x封神榜(5) -- 【界面UI设计】

转载 2013年12月05日 14:50:23

      简单探讨一下如何在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里面的一些基本逻辑,不过这套逻辑是需要玩家去手动触发的;

相关文章推荐

cocos2d-x封神榜demo源码

  • 2014年03月03日 11:34
  • 35.75MB
  • 下载

cocos2d-x封神榜(2) -- 【精灵的八面玲珑】

继续上一篇文章继续聊吧,这章内容会比较多,也会附上代码,很多朋友加了群,大家在群里面探讨了很多东西,这让大家都觉得受益匪浅,这便是极好的,废话不多了,精灵是游戏的重要组成部分,那ARPG里面的精灵必然...

cocos2d-x封神榜(1) -- 【研发思路及感想】

我半年前进入了目前的这家做教育行业的公司(在此之前一直从事原生态开发手游的迷茫之路),学习是一件很快乐的事情,来到这家公司我有了很多时间去学习,不管是公司业务,还是其他技术相关的。于是开始了cocos...

Cocos2D-X2.2.3学习笔记5(UI系统)

  • 2014年05月12日 22:29
  • 785KB
  • 下载

Cocos2d-x学习笔记(五)—— 常见UI界面(未完全)

对于UI界面,目前常用的有字体显示,标签,菜单,进度条,调度器。(后续添加) 我们的代码都是直接在新建项目HelloWorld中的HelloWorldScene.cpp的init()函数中操作。 ...

cocos2d-x 3.0学习一:cocostudio导出UI界面文件的加载及使用的若干问题

说一些抱怨的话,cocos2d-x自3.0以后发生的变化可以用fan

Cocos2D-X2.2.3学习笔记5(UI系统)

前言: 1.字体

cocos2d-x 3.3 之卡牌设计 NO.6 Loading界面(异步加载图片,plist)

刚开始做卡牌的时候没有想到要做loading,因为小游戏资源不多。 但是后来不断的加图片,直到在真机上发现卡顿的问题,我才知道该需要加loading了...... 首先,我们先定义类: class...

cocos2d-x 基础系列 (03) 设计主界面以及Sprite类的学习

这篇主要介绍Sprite类,在介绍这个类之前,先设计一个点开游戏进入游戏的主界面。 只修改MainScene.cpp中的init函数 其中用到了C++标准容器vector创建多个menuItemLab...
  • WAN_EXE
  • WAN_EXE
  • 2017年03月25日 01:28
  • 160

Cocos2d-x 设计模式 (5):防御式编程模式

声明:防御式编程是提高程序代码质量的一种手段,它不能算是真正意义上的模式。但是,这里,我还是要给它冠之以“模式”二字。 原因有2: 1.cocos2d-x的框架源代码大量采用了防御式编程技术,用来...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x封神榜(5) -- 【界面UI设计】
举报原因:
原因补充:

(最多只允许输入30个字)