Tui-x 基础使用

本章以Tui-x3.x仓库里的HelloTuiCpp项目来做具体解说。[ 由于HelloTuiCpp里面演示的全部控件，本文篇幅有限，不能一一说明，所以仅仅能列举两个控件，后面的文章会有针对性地解说其它控件的制作，但大多数的控件的制作都是大同小异的 ]

准备：

FlashCS5.5+ 。Cocos2dx3.2正式版，Tui-x 3.2 。VS 2012+

1.创建场景。

打开FlashCS。并创建一个新的fla文件，改好场景名并保存。

我们创建组件时候须要从Template.fla里面复制组件出来。然后进行摆放和设置属性。

容器类panel和cell除外。他们依旧使用影片剪辑。

这里我们创建一个main.fla，然后在右边的库里创建一些目录，这些目录尽管是虚拟的。可是，稍后导出的控件资源路径将会跟这些目录一一相应，所以，我们须要在项目的Resource里创建相应的目录。

举个栗子，如图

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWIzNDI4NTQ0MDY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="424" height="320" alt="">

2.创建主容器panel。Ctrl+F8 创建一个影片剪辑并命名，前缀为panel_，这里建议跟场景相关，如panel_main。

Tui-x有命名规则，固定分前缀和固定后缀，如panel_就是固定前缀，在后面的文章中将会具体解说控件中的命名规则。

点击确定。由于panel是容器控件，所以先放着。

然后设置舞台的宽高。这里以800*480为样例。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWIzNDI4NTQ0MDY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

3.创建控件。

先从Template.fla复制一个img_tpl控件到你的main.fla中的库里，并改名为img_mainbg，注意，全部控件的原点都在中心位置，这是由于要跟c2dx的默认锚点保持一致。并保存在库的main文件下。

这时候，我们须要项目在Resource/main下放一张名为img_mainbg.png的图片。

然后回到FlashCS。进入img_bg内部。把刚刚的位图拖进去，相对舞台居中，由于我们要用这样图来占位置。

强调一下，你所拖进flash的png图 纯粹仅仅是用来占位。终于游戏中使用的资源还是来自Resource相应的资源。

我建议大家在Flash库里创建一个无关文件夹res，专放这些占位置的png位图。

接下来创建一个button。从Template.fla复制一个btn_tpl到mian.fla的库里。并改名为btn_ok ，保存在库的main目录下，相同我们须要准备对应的资源到Resouce/main下。这里须要btn_ok_normal.png。btn_ok_select.png和btn_ok_disable.png，这里的_normal。_select。_disable就是Tui-x的固定后缀。相同在后面的章节会具体列举。

我们进入这个btn_ok的内部，然后拖放一张btn_ok_normal.png位图进去占位，相同舞台居中。这样我们的库里就准备好控件了。

4.布局

有了控件。我们能够開始布局。

首先我们把库中的panel_main拖到舞台中央，注意。是舞台的正中央，如800*480的舞台，则放到x=400,y=240的地方。

这样做的目的仅仅是方便转换c2dx的坐标。

还有命上实例名。建议是跟控件名一样，由于稍后导出的tag表将会依据这个实例名来生成key值。

（当然，你随便起也没关系，仅仅要不反复就好）

由于panel控件是主容器，也是触摸事件的接收者，所以，全部控件必需要放在panel里面。

接下来我们进入panel_main的内部，相同把btn_ok拖进去。位置随便。

记住。一定要命好实例名。不然没法生成该控件。

接下来，我们能够依据项目须要设置命名空间，这样能够有效防止资源重命名。由于非常多场景的button都会叫btn_ok，这时候命名控件的作用就体现了。设置命名空间也十分简单，仅仅要在该场景的帧上面命名就可以。（当然，你不设置也是没有问题的）

最后确定全部舞台上的控件都命好实例名，就能够開始导出xml和.h了

5.导出xml和tag表

如今使用TuiEditor Export.jsfl来导出xml和tag文件。TuiEditer Export.jsfl须要放到指定文件夹（如C:\Users\Administrator\AppData\Local\Adobe\Flash CS6\zh_CN\Configuration\Commands），然后用一个xml去配置就可以使用，这个配置xml能够參考HelloTui素材文件夹的格式。

这时候你会发现导出了两个文件。

一个是xml一个.h。

6.编写载入代码。

接下来程序猿的工作来了。先创建一个普通的项目。

然后，创建一个mainui类，引入你刚生成的.h。

以下是代码片段，具体代码请參考HelloTuiCpp。里面结合使用了cocosBase。

这里Tui-x的主要工作是：在你场景载入完毕资源后，依据你的xml内容创建组件。这时候你能够通过附送的tag表，使用getChildByTag直接获取对应的控件。并监听对应的事件就可以，十分自由。方便。

执行结果：

7.说明

Tui-x 创建控件的方式有两种，一种是直接使用散图png，另一种是使用plist打包纹理。

假设你是使用打包纹理的话，要注意的是。使用TP打包的时候要把png所在的文件夹径路也打包进去。不要直接把图拖进TP，你应该点击Add folder，然后去到你要打包路径的上一层。

蓝色文件夹代表打包路径。

接下来。在fla中须要用到spriteFrame得控件勾选spriteFrame，然后在程序里，自行把这些plist大图都载入进游戏。至于怎么管理和分多少个plist全然由开发人员掌控，自由吧。顺便说一下，TuiBase另一个有用的功能，设置setAutoRemoveUnusedSpriteFrame(true)后，在场景析构。它的析构里会去删除不使用的SpriteFrame，以减轻内存压力。

CocosWidget
官方群261286285 Tui-x 官方群 347085657

8.下载

Tui-x
2.x :  https://github.com/LingJiJian/tui/tree/Tui-x    Tui-x 3.x  https://github.com/LingJiJian/Tui-x