本章以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里创建相应的目录。
举个栗子,如图
2.创建主容器panel。Ctrl+F8 创建一个影片剪辑并命名,前缀为panel_,这里建议跟场景相关,如panel_main。
Tui-x有命名规则,固定分前缀和固定后缀,如panel_就是固定前缀,在后面的文章中将会具体解说控件中的命名规则。
点击确定。由于panel是容器控件,所以先放着。
然后设置舞台的宽高。这里以800*480为样例。
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