Question

如何使用 CocoStudio UI 编辑器实现《乱斗堂》设置界面

Answer 1

　　首先建立主配置界面：
　　安装好 CocoStudio 程序，并准备好所需要的素材

　　建立新的项目，命名“ChaosFight”,设置分辨率（根据实际需要），这里手动填写分辨率。
　　导入游戏的素材到项目，在界面添加图片框控件，显示背景
　　根据需要添加控件，在这个主界面上我们添加了，一个图片框，下面四个文本按钮，再下面一排四个图片按钮，最下面是两个文本按钮和一个文本框（文本域）。

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

　　设置图片按钮之时，可以设置禁用时显示的图片。所有的可点击操作的控件，需要启用“交互”属性。
　　设置按钮属性 默认图片 与 点击效果图 的图片相同（或者不同，按下效果图如果不设置，实际操作按下也不显示，空白）
　　导出各部分资源文件
　　2.2 其次我们需要一个 “修改密码” 的二级 UI 界面：
　　新建立项目，并导入相关资源。
　　设计界面，

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

　　点击右侧对象结构，我们可以复制整个树枝“节点”，然后粘贴到树中，如上图，“新密码”区域，我们将相关的控件集合在“新密码”节点，然后拖动此节点，可以很好的完成内部元素的相对位置。
　　修改相关属性，命名规范并导出资源
　　以上时设计界面的简单步骤，所有的都是可视化操作，所见即所得，已经提供了常用的控件，并且还在不断添加完善。