Tui-x简单介绍

1.什么是Tui-x

Tui-x是一个创建cocos2d-x UI界面的解决方式，而builder用的则是FlashCS，通过使用jsfl来拓展FlashCS从而达到UI编辑器的功能。这个jsfl所做的工作十分简单，举个样例，假设你的项目是CPP的话，它会帮你导出一份界面xml和一个.h，xml文件将会使用tui的解析库来解析，头文件则是一个tag的映射表，（假设是Lua项目则会帮你导出xml和lua文件），你能够利用这个tag映射表轻松地获取随意一个控件。

2.Tui-x所生成组件是什么

Tui-x所生成组成来自CocosWidget，这是一个优秀的第三方组件库，包括富文本，网格等高级控件，数量之多，质量之高，绝不亚于其它不论什么一款编辑器。(注：CocosWidget简称ccw) 值得一提的是，Tui-x已经能够全然可视化生成全部ccw的控件，包括CTableView，CListView，CGridView等高级复合控件，这些编辑操作全然在FlashCS中完毕，门槛十分低廉，你甚至能够全然交给美术和策划去做界面。

（设计界面）

（生成界面）

3.Tui-x的特点是什么

①Tui-x使用门槛十分低廉，仅仅要会使用FlashCS创建影片剪辑就可以进行开发。一个场景相应一个fla文件，便于美术分工，互不依赖。全部组件的创建须要遵循命名规则，假设你之前有玩过mornui的话，将会十分有亲切感。举例，创建一个button，须要创建一个影片剪辑并改名，成btn_前缀，如btn_ok，这个button所使用的资源图会依据你这个影片剪辑所在库路径去找相应的资源。如，这个btn_ok在fla库中的main/下，那么它在游戏中会去找Resouce/main/下的btn_ok_normal.png，btn_ok_select.png 和 btn_ok_disable.png 。(注：找不到纹理不会崩) 这里的_normal就是固定的后缀命名规则，而btn_则是固定的前缀命名规则，在下篇文章中将会具体列出全部命名规则。

②Tui-x的资源管理十分自由，全然交由开发人员管理，自己载入plist和自己删除plist，这样看起好像不太智能，事实上是把管理权还给开发人员。这样有利于资源重用。控件创建分两种模式，spriteFrame和普通png图。[spriteFrame模式：载入plist，并使用该纹理创建控件] [普通png图：直接用散图png来创建控件]  在仅仅要在fla库中，把文件夹结构跟项目真实资源文件夹一一相应，然后在创建控件时候在TuiManager打开useSpriteFrame的开关就可以。

③利用FlashCS的先天优势，Tui-x能够做到非常多ccs和ccb都做不到的事，比方字体描边和阴影，执行效果如上图。编辑复合控件，如CListView和CGridView等，做背包so easy。

3.Tui-x的触摸机制是如何的

Tui-x严格来说，它不是一套框架，它仅仅是一个工具，帮助开发人员生成ccw，所以它的触摸机制就是ccw的树状触摸方式，所有触发事件所有来自CWidgetWindow分发，很多其它关于cocoswiget的描写叙述请戳http://blog.csdn.net/cocosviva/article/details/18970717  ，值得一提的是，在ccw里要实现popup效果将会是一件十分简单的事，你根本不用考虑或设置触摸优先级。在github上的样例中有演示。

4.Tui-x的优势是什么

Tui-x有2.2.3 和 3.0 正式版两个版本号 ，分别相应cpp 和 lua，满足各个项目的开发需求。而编辑器jsfl的总代码量仅1500行，tui解析库总代码量700行，这个数量级我看除了Tui没有哪款编辑器能做到。有人说：你不就是借Flash的肩膀么，吊什么吊。我仅仅能说，you can you up !  Tui-x就是不反复造轮子的最佳样例。

尽管XML的解析比JSON稍稍慢点，可是Tui-x是使用RapidXML解析，并有做缓存，所以不存在解析瓶颈。

Tui-x不单单仅仅能生成普通控件，它可以生成骨骼，EditBox，粒子等特殊组件，骨骼 推荐使用Flash的龙骨插件 dragonbonepanel 所有都是可视化，完爆ccs的ui编辑器 + 场景编辑 + 骨骼编辑器。[对不起我并没敌意，我仅仅是说实话]

Tui-x拓展性是一流的，学过js的甚至能够直接改动jsfl，在导出的xml中添加若干个字段十分easy。再看看ccw，假设对ccw有了解的话，也能够定义控件并融合到Tui-x中，后面的文章将会教大家怎样制作自己的控件，并用Tui-x生成。

Tui-x使用代码十分简单，寥寥几行，通过附送的.h或lua获取随意控件，监听事件。

//cpp
void Mainui::onLoadScene()
{
	TuiManager::getInstance()->parseScene(this,"panel_main",PATH_MAIN);
}

--lua
function Welcomeui:create()
	local ret = Welcomeui.new()
	TuiManager:getInstance():parseScene(ret,"panel_welcome",PATH_WELCOMEUI)
	return ret
end

5.为什么要使用Tui-x开发 

Tui-x上手easy，开发便捷，ccw这套组件是久经磨练，精心设计的，接口十分人性化，还包括lua和cpp还有3.x版，因为FlashCS是跨平台的，Tui-x一不小心也跨平台了。还有一方面看，cocosbuilder已经没人维护了，忽略。再看cocostudio，常常崩溃不说，你叫美术用来做个场景教半天，还常常投诉难用，再看看导出来的ExportJson，冗余数据一堆，体积大不说，崩溃了还不好调试，富文本中文换行乱码，无力吐槽，你说用ccs做骨骼动画，好吧，错位，各种闪屏。你要记住，开发不是纯写代码的。以上问题Flash都能非常好地解决，美术同学更愿意用Flash和Ps。

6.项目历史，鸣谢和交流

Tui-x的诞生前有一个叫tui的项目，也是用jsfl做编辑器，作者 仝鹏飞，但当时的tui控件仅仅有panel,image,button这三个，根本不能满足开发需求，后来Tui-x诞生了，抛弃原有的结构和接口，又一次打造全新的Tui-x，之所以叫Tui-x，纯粹是尊重原著。

感谢CocosWidget的作者 李俊霖 Jason.lee 同学，感谢 仝鹏飞 同学。

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

7.下载

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