如何使用 CocoStudio UI 编辑器实现设置界面并且包括代码

• 1 游戏中必不可少的 UI 元素
• 2 使用 CocoStudio UI 编辑器设计配置界面
  • 2.1 首先建立主配置界面：
  • 2.2 其次我们需要一个 “修改密码” 的二级 UI 界面：
• 3 编写代码控制页面逻辑

1 游戏中必不可少的 UI 元素

一个成功的游戏离不开友好的用户体验，而用户体验则取决于功能是否合理，界面是否美观等因素，除了游戏的核心玩法之外，游戏中的各种“配置功能”也是必不可缺的，更准确的说，游戏中存在那么些必不可少的 UI 元素。

上图所示是近期非常火爆的游戏《乱斗堂》的截图，内容是其“配置界面”，如果要实现这样一个“配置界面”，如果是你，你该从何下手！首先要有素材（当然请美工制作了），然后我们编写代码，这样一个界面我们可以用一个层来实现，加载各种图片素材，逐一添加至层。其实，这都没什么，只是你需要手动设置坐标，不断的运行调试，才能达到最终想要的效果而已。效果出来了，实现具体的功能，点击操作该如何实现，如果所有显示的图片都是精灵，那么你需要做触摸处理，判断点击有效否，然后可能需要修改精灵图片（不同的点击效果），聪明一点的做法是实用 CCMenu 来实现点击功能，但如此可能会引入其它问题，CCMenu 的触摸优先级别很高，以至于多层 UI 的情况，处理起来变得繁杂。而更聪明一点的做法，就是设计一套 UI 系统，来满足各种需求！

我们在编写游戏之前还需要实现一套自己的 UI 系统？当然不是，即便是 Cocos2d 的第一个 python 版本，也不是一夕而就的，而是开发多个游戏之后总结、规范、封装重用之后的框架，而 UI 系统也符合这么个客观规律。都是为了解决实际开发过程中遇到的问题，重用相同的功能。简化我们的开发。

下面介绍如何使用 CocoStudio 的 UI 编辑器来帮助我们实现这样一个“配置界面”，并且实现其配置功能。

2 使用 CocoStudio UI 编辑器设计配置界面

2.1 首先建立主配置界面：

1. 安装好 CocoStudio 程序，并准备好所需要的素材
   
2. 建立新的项目，命名“ChaosFight”,设置分辨率（根据实际需要），这里手动填写分辨率。
3. 导入游戏的素材到项目，在界面添加图片框控件，显示背景
4. 根据需要添加控件，在这个主界面上我们添加了，一个图片框，下面四个文本按钮，再下面一排四个图片按钮，最下面是两个文本按钮和一个文本框（文本域）。
   
5. 在编辑时，我们需要注意以下几点：
   • 设置图片按钮之时，可以设置禁用时显示的图片。所有的可点击操作的控件，需要启用“交互”属性。
   • 设置按钮属性 默认图片 与 点击效果图 的图片相同（或者不同，按下效果图如果不设置，实际操作按下也不显示，空白）

6. 导出各部分资源文件

2.2 其次我们需要一个 “修改密码” 的二级 UI 界面：

1. 新建立项目，并导入相关资源。
2. 设计界面，如下图所示：
   
   这里我们添加了三组密码框。而在设计这样三个类似控件集的时候，有个技巧，我们首先局部好一个个控件区域，如上“旧密码”区域，然后我们将相关的控件树结构，统一在一起，如图：
   
   
   点击右侧对象结构，我们可以复制整个树枝“节点”，然后粘贴到树中，如上图，“新密码”区域，我们将相关的控件集合在“新密码”节点，然后拖动此节点，可以很好的完成内部元素的相对位置。
3. 修改相关属性，命名规范并导出资源

以上时设计界面的简单步骤，所有的都是可视化操作，所见即所得，已经提供了常用的控件，并且还在不断添加完善。

3 编写代码控制页面逻辑

1. 建立新的工程，引入 CocoGUILIB 扩展库，和 UI 编辑器导出的资源文件（工程建立步骤请实时关注官方说明，不同版本操作步骤不同，这里使用的时 2.1.4e 版本，请下载最新的版本库，以使用最简单的方法配置环境等。）
2. 创建一个新的场景类，用于加载我们的 UI 资源，并编写相关逻辑，其关键代码如下（实现加载，跳转逻辑控制功能） 所有代码即工程资源:
3.  工程代码下载 地址：点击下载整个工程

 

#ifndef TestCpp_ChaosFight_h
#define TestCpp_ChaosFight_h

#include "cocos2d.h"
#include "CocosGUI.h"

USING_NS_CC;
USING_NS_CC_EXT;

class ChaosFightUI: public CCLayer{
public:
    static CCScene* scene();
    virtual bool init();
    CREATE_FUNC(ChaosFightUI);
    
    void tbChangePwdCallback(CCObject* pSender);
    void tbBindingEmailCallback(CCObject* pSender);
    void tbChangeRoleCallback(CCObject* pSender);
    void tbLogoutCallback(CCObject* pSender);
    
    void btnSoundEffectCallback(CCObject* pSender);
    void btnMusicEffectCallback(CCObject* pSender);
    void btnSavingElectricityCallback(CCObject* pSender);
    void btnVideoCallback(CCObject* pSender);
    
    void tbAboutCallback(CCObject* pSender);
    void tbClearCacheCallback(CCObject* pSender);
    
    
    void btnXCallback(CCObject* pSender);
    void tbOkCallback(CCObject* pSender);

private:
    UILayer* ul;
    
    
    UILayer* ulPwd;
    
    UIButton* btnX;
    UITextButton* tbOk;
    
    UITextField* tfOldPwd;
    UITextField* tfNewPwd;
    UITextField* tfNewPwdConfirm;
    
};


#endif

 

    实现代码

 

#include "ChaosFight.h"

CCScene* ChaosFightUI::scene(){
    CCScene* scene = CCScene::create();
    CCLayer* layer = ChaosFightUI::create();
    scene->addChild(layer);
    return scene;
}

bool ChaosFightUI::init(){
    bool bRef = false;
    
    do{
        CC_BREAK_IF(! CCLayer::init());
        
        ul = UILayer::create();
        // 设置 UI 层的tag
        this->addChild(ul, 0, 100);
        ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"));
        
        // 获得各个控件，并添加点击事件
        UITextButton* tbChangePwd = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangePwd"));
        UITextButton* tbBindingEmail = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbBindingEmail"));
        UITextButton* tbChangeRole = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangeRole"));
        UITextButton* tbLogout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbLogout"));
        
        
        UIButton* btnSoundEffect = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSoundEffect"));
        UIButton* btnMusic = dynamic_cast<UIButton*>(ul->getWidgetByName("btnMusic"));
        UIButton* btnSavingElectricity = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSavingElectricity"));
        UIButton* btnVideo = dynamic_cast<UIButton*>(ul->getWidgetByName("btnVideo"));
        
        UITextButton* tbAbout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbAbout"));
        UITextButton* tbClearCache = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbClearCache"));
        
        // 设置字体颜色
        tbChangePwd->setTextColor(0, 0, 0);
        tbBindingEmail->setTextColor(0, 0, 0);
        tbChangeRole->setTextColor(0, 0, 0);
        tbLogout->setTextColor(0, 0, 0);
        
        tbAbout->setTextColor(0, 0, 0);
        tbClearCache->setTextColor(0, 0, 0);
        
        // 为控件添加处理事件
        tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback));
        tbBindingEmail->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbBindingEmailCallback));
        tbChangeRole->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangeRoleCallback));
        tbLogout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbLogoutCallback));

        btnSoundEffect->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSoundEffectCallback));
        btnMusic->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnMusicEffectCallback));
        btnSavingElectricity->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSavingElectricityCallback));
        btnVideo->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnVideoCallback));

        tbAbout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbAboutCallback));
        tbClearCache->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbClearCacheCallback));
        
        
        bRef = true;
    }while(0);
    return bRef;
}

void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){
    // 创建加载修改密码界面 ulPwd 作为类成员属性，以便重用  
    ulPwd = UILayer::create();
    ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"));
    this->addChild(ulPwd);
    ulPwd->setAnchorPoint(CCPoint(0.5,0.5));
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    ulPwd->setPosition(CCPoint(winSize.width / 2 - 250, winSize.height / 2 - 180));
    
    // 获取点击确定按钮
    tbOk = dynamic_cast<UITextButton*>(ulPwd->getWidgetByName("tbOk"));
    tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback));
    tbOk->setTextColor(0, 0, 0);
    
    tfOldPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfOldPwd"));
    tfNewPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwd"));
    tfNewPwdConfirm = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwdConfirm"));
    
    tfOldPwd->setColor(ccc3(0, 0, 0));
    tfNewPwd->setColor(ccc3(0, 0, 0));
    tfNewPwdConfirm->setColor(ccc3(0, 0, 0));
    

    ul->setTouchEnabled(false);

}

void ChaosFightUI::tbBindingEmailCallback(cocos2d::CCObject *pSender){
    CCMessageBox("绑定邮箱", "title");
}

void ChaosFightUI::tbChangeRoleCallback(cocos2d::CCObject* pSender){
    CCMessageBox("切换角色", "title");
}

void ChaosFightUI::tbLogoutCallback(cocos2d::CCObject *pSender){
    CCMessageBox("注销", "title");
}

void ChaosFightUI::btnSoundEffectCallback(cocos2d::CCObject *pSender){
    CCMessageBox("音效", "title");
}

void ChaosFightUI::btnMusicEffectCallback(cocos2d::CCObject *pSender){
    CCMessageBox("音乐", "title");
}

void ChaosFightUI::btnSavingElectricityCallback(cocos2d::CCObject *pSender){
    CCMessageBox("省电", "title");
}

void ChaosFightUI::btnVideoCallback(cocos2d::CCObject *pSender){
    CCMessageBox("片头", "title");
}

void ChaosFightUI::tbAboutCallback(cocos2d::CCObject *pSender){
    CCMessageBox("关于", "title");
}

void ChaosFightUI::tbClearCacheCallback(cocos2d::CCObject *pSender){
    CCMessageBox("清楚缓存", "title");
}

void ChaosFightUI::btnXCallback(cocos2d::CCObject *pSender){
    CCMessageBox("btnX", "title");
}

void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){
    // 获取文本框值，并且打印
    const char* value = tfOldPwd->getStringValue();
    CCLog(value);
    ul->setTouchEnabled(true);
    this->removeChild(ulPwd);
}

 

 

 

1. 最后运行效果如下：二级 UI 界面：文本输入框控件：