首页 > 代码库 > Tui-x简单介绍

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