zoukankan      html  css  js  c++  java
  • Tui-x 基础使用 ( 转 ) ----- 2

    本章以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位图。


    接下来创建一个按钮。从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拖进去。位置随便。记住,一定要命好实例名,不然没法生成该控件。


    接下来,我们可以根据项目需要设置命名空间,这样可以有效防止资源重命名。因为很多场景的按钮都会叫btn_ok,这时候命名控件的作用就体现了。设置命名空间也十分简单,只要在该场景的帧上面命名即可。(当然,你不设置也是没有问题的)


    最后确定所有舞台上的控件都命好实例名,就可以开始导出xml和.h了

    5.导出xml和tag表

    现在使用TuiEditor Export.jsfl来导出xml和tag文件。TuiEditer Export.jsfl需要放到指定目录(如C:UsersAdministratorAppDataLocalAdobeFlash CS6zh_CNConfigurationCommands),然后用一个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


  • 相关阅读:
    Android 按键消息处理Android 按键消息处理
    objcopy
    SQLite多线程读写实践及常见问题总结
    android动画坐标定义
    Android动画效果translate、scale、alpha、rotate
    Android公共库(缓存 下拉ListView 下载管理Pro 静默安装 root运行 Java公共类)
    Flatten Binary Tree to Linked List
    Distinct Subsequences
    Populating Next Right Pointers in Each Node II
    Populating Next Right Pointers in Each Node
  • 原文地址:https://www.cnblogs.com/dudu580231/p/4992536.html
Copyright © 2011-2022 走看看