CocosBuilder是一款原生的支持cocos2d和cocos2d-x的UI编辑器，它的功能很强大。现在触控开发的一款编辑器Cocostuido的功能要更加全面，CocosBuilder已落后，并且也不会再对它进行更新了。但是在做项目中发现，仍然有不少团队在使用CocosBuilder,可能是因为第一次接触编辑器，CocosBuilder容易上手，也许是项目初级Cocostudio还不是很成熟，不管是什么原因吧，现在仍然有很多同学在CocosBuilder的使用中迷茫着，这里把自己的一点使用心得来分享一下。

打开CocosBuilder的界面，如下图

首先我们先来看看我们所用的版本，我现在用的是 3。0-alpha4，CocosBuilder的版本一定要和cocos2d-x引擎相对应，我所用的版本对应的是cocos2d-x 2。1。3,如果不对应，请到CocosBuilder网站去下载相应的程序包

下面我们先来新建一个CocosBuilder的项目吧,File > New >New Project

起个名字叫TestCocosBuilder

然后默认界面如下所示

我们来看CocosBuilder的几个区域，工具条，文件区，渲染区，操作区，属性区，当然这几个区的名字是我自己起的，非官方的，不过我觉得还是挺有代表性的。

首先我们讨论的是工具条

我们来看左边的三个按钮

这三个按钮来控制渲染区大小的，+号就是用来放大渲染区的，-号可以缩小渲染区，=号是回到渲染区的原始比例，这三个按钮可以帮助我们很轻松的调节渲染区的大小，方便我们来进行整体和细节的操作。

接下来这三个按钮，如果用过XCode的同学们应该很熟悉，这就是控制者文件区，操作区，属性区的隐藏和显示的，当前状态就是都显示，当按下相应的按钮，对应的区域就是隐藏。

下面是我们的结点按钮们，

CCNode

用来创建一个CCNode结点，但是这个结点是不可显示的，它会以OpenGl的原点为中心点，但是它没有任何可渲染的内容，所以是空白的。

CCLayer,CCLayerColor,CCLayerGridient,CCScrollView

前面三个就是用来创建CCLayer,CCLayerColor,CCLayerGridient,不明白的同学去看代码，这里就不在介绍它们三个了，我们着重介绍一下CCScrollView，新建一个CCScrollView,它是以左下角为零点的，我们来看它的属性，最上面是JS Controller，但是我们不需要JS，所以在File >Project Settings 里面去掉勾选

然后继续向下看，单选框Visible就是设置它的visible属性，然后是Position，

前面四个是让你来选取坐标系原点，第五个是设置相对坐标，第六个是根据设备的尺寸来进行缩放。我们这里采用第一种坐标系。然后可以设置X，Y的坐标值。

这里我们来设置的是CCScrollview的可滑动区域的大小。

用来设置锚点，不过对于CCLayer类和它的继承类来说，应该不起作用，这里我们不做详细介绍。

重要的是这里，我们可以设置我们已经编辑好的一个CCB文件来作为它的Container，还可以设置方向。

CCSprite

这里是用来新建CCSprite和CCScaleSprite的，下面我们来新建一个CCSprite,然后可以在属性区来设置它的属性，这里的主要属性就是

设置一个图片，透明度，和叠加颜色。

CCLabel

这是用来创建文本的

CCMenu

用来创建CCMenu按钮

CCControlButton

用来创建CCControlbutton

粒子

CocosBuilder集成了粒子系统，不过对于相当多参数的粒子系统来说,还是建议大家用更加专业的工具来做。