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

2.1?首先建立主配置界面：

安装好 CocoStudio

程序，并准备好所需要的素材

建立新的项目，命名“ChaosFight”,设置分辨率（根据实际需要），这里手动填写分辨率。

导入游戏的素材到项目，在界面添加图片框控件，显示背景

根据需要添加控件，在这个主界面上我们添加了，一个图片框，下面四个文本按钮，再下面一排四个图片按钮，最下面是两个文本按钮和一个文本框（文本域）。

在编辑时，我们需要注意以下几点：

设置图片按钮之时，可以设置禁用时显示的图片。所有的可点击 *** 作的控件，需要启用“交互”属性。

设置按钮属性 默认图片 与 点击效果图 的图片相同（或者不同，按下效果图如果不设置，实际 *** 作按下也不显示，空白）

导出各部分资源文件

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

新建立项目，并导入相关资源。

设计界面，如下图所示：

这里我们添加了三组密码框。而在设计这样三个类似控件集的时候，有个技巧，我们首先局部好一个个控件区域，如上“旧密码”区域，然后我们将相关的控件树结构，统一在一起，如图：

点击右侧对象结构，我们可以复制整个树枝“节点”，然后粘贴到树中，如上图，“新密码”区域，我们将相关的控件集合在“新密码”节点，然后拖动此节点，可以很好的完成内部元素的相对位置。

修改相关属性，命名规范并导出资源

3?编写代码控制页面逻辑

建立新的工程，引入 CocoGUILIB 扩展库，和 UI

编辑器导出的资源文件（工程建立步骤请实时关注官方说明，不同版本 *** 作步骤不同，这里使用的时 2.1.4e

版本，请下载最新的版本库，以使用最简单的方法配置环境等。）

创建一个新的场景类，用于加载我们的 UI

资源，并编写相关逻辑，其关键代码如下（实现加载，跳转逻辑控制功能） 所有代码即工程资源:

?工程代码下载 地址：点击下载整个工程

#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"))

模拟人生4ui控制器是UI控制器。根据查询相关公开信息显示，模拟人生4游戏的控制器可以让玩家更好地 *** 控模拟人生4中的角色，通过UI控制器，玩家可以改变游戏中角色的行为和动作，可以使用鼠标和键盘等设备来实现风格形象和人物设置的调整。

PS：PS软件在UI设计工作中主要来用做UI设计界面设计、图标设计、图片处理的

AI：AI软件在UI设计工作中主要用来做UI界面设计、图标设计、字体设计、插画设计的

AE：AE软件在UI设计工作中主要用来做动效设计的

XD：XD或者sketch软件，Sketch（只能在苹果电脑上安装）XD软件可以在双系统上安装

Sketch和XD这两款软件功能是差不多的，XD的话是一款非常适合做UI设计工作，XD做图会非常快，因为XD的工具特别少，里面的工具是专门为做UI设计工作开发的一款软件，而且XD软件特别小，不会卡。

ARP：ARP或者默刀软件，ARP和默刀软件功能差不多二选一学习就可以了，这两款软件都是做原型设计的

UI设计是由很多很多界面组成的，这些界面每一步之间去交接的这个界面，如果说我们只做一个界面，UI设计师是可以做出来的，但是要做几十个上面个界面，如果我们一个个做是肯定会出问题的，所以需要先制作原型，我们根据原型再制作界面，这就是我们的前后联系，原型是不用做这个颜色，图标，细节的，只需搭建一个基础的版式就行，这个就是我们用ARP或者默刀软件做的。

C4D：C4D软件在UI设计工作中主要用来做建模的

蓝湖：蓝湖软件在UI设计工作中主要用来做标注设计的

就是我们做好了页面，这个页面的高底，宽度，包括页面的色值我们都需要标注出来，为什么需要标注呢，因为我们做的图，做完之后他就是张图片，这个图片我们用手机是点不了的，我们手机APP上的那些图之所以能点，那是因为有程序猿做了一个二次开发，这个东西我们不用懂，但是我们要标注出来，标注出来让程序猿知道你的颜色，你的色值，你的尺寸到时是多少，他才能开发出来。

---