uiCoder界面代码生成工具 part1 概述+图片制作

uiCoder简述

是一个界面代码生成工具的类库，FlashCS加载它来实现代码导出。

在一定的命名限制，和制作规范下，实现代码生成。提供自定义代码模板，实现不同语言的代码生成。

GIT 地址:https://github.com/jiasy/uiCoder

流程中附带一些图片，方便大家参考。关于FLASH CS的使用，请自行了解。以免不清除截图来自于那些操作。

目前代码模板支持只有Coco2dx lua 版。关于lua版本的基类支持文档，稍后会有教程以及文档

生成代码的流程：

1.利用 Flash CS 进行界面的摆放

2.发布过程中，解析场景中存在的显示对象，将他们的属性输出成JSON文件，放置在桌面的uiCoder文件夹中

3.解析桌面 uiCoder 中的 json 文件，根据指定的语言，寻找本地模板进行代码生成。

4.根据 FLA文 件夹中 config.json 的配置，将代码输出到指定的文件夹中。

5.根据 指定的语言名称，寻找对应语言的支持，将支持类文件拷贝到指定文件夹。

使用方法:

1.新建FLA文件[自带的sampleFLA.fla，第一步都已经完毕，如要新建，请看这里。注意：创建结束，请拷贝UI编辑所必须的Specail/Rect等库文件。推荐在sampleFLA.fla基础上修改创建。]

1.1不选中任何场景中的元素，这时属性面板，显示当前FLA的信息，点击ActionScript3.0后面的这个小扳手编辑ActionScript设置

1.2在弹出界面中编辑

1.2.1 编辑 Document class 为 Main。[在SWC中的主类，用来解析场景元素]

1.2.2 Library path 所包括的选项卡中选择"Browse to SWC file"[鼠标在按钮上稍微悬浮一会儿就有提示]。 

关联 swc/uiCoder/uiCoder.swc 文件。

2.创建游戏对象。继承自Game类。[这样一个FLA中就可以编辑多个Game，相互之间公用的东西随便拖拽]

新建一个元件[F8 / ctrl+F8]，在属性中设置类名。

Game 类名命名规则："项目名_代码模板名”

sample 为项目名称

lua        为所用语言模板名

只有放置于场景的Game实例才会被解析

3.显示对象

3.1 种类

DisUI             : 显示对象的承载容器，承载文字图片等等。也可以承载其他的DisUI。

图片              : 图

文字              : 文字

Rect              : 选区

Special         : 用来进行属性添加，进行一些特殊的参数设置

九宫格图片   : 可以拉伸的九宫格

DIsRoll          : 滚动层[承载列表之类的]

DisList           : 列表[待实现]

3.2 取得的显示对象的通用属性 [Rect Special 是DisUI 自我的属性。不是显示对象，所以没有一下默认属性]

显示对象的基本属性，位置偏移，大小放缩，旋转角度，透明度，颜色偏移量，命名，显示层级。

按照 ：属性缩写:含义 英文，这个格式来列表

insName : 对象在场景中的命名instance name

index : 显示层级 index

ax : 锚点x anchor x

ay : 锚点y anchor y

px : x坐标 position x

py : y坐标 position y

r : 旋转 r

sx : x向放缩 scale x

sy : y向放缩 scale y

a : 透明度[0~1] alpha

ctr : 颜色偏移红 color transform red

ctg : 颜色偏移绿 color transform green

ctb: 颜色偏移蓝 color transform blue

3.3 代码模板替换，简述[后面会有详细的解说]

cocos2dx lua 为例，会按照${属性}的格式进行键值替换。

摆放一个node调用的方法为:

node:setPosition(x,y)

形成代码模板就为:

node:setPosition(${px},${py})

${px} / ${py} 被替换成具体值。这样就完成了属性替换。

4.在这个Game的实例元件中创建UI，UI的继承基类为DisUI。[在场景中双击元件就可以进入，这个元件]

DisUI 类名命名规则："模块名_UI名称"

test        为模块名

main      为UI名称

DisUI 特殊要求       ：一个UI中的子UI类名必须是在主UI的基础上添加后缀。

          如果一个子UI存在于多个UI中，那么 "模块名" 一定要写成common。[为了强调所属关系，规范通用显示对象的位置]

5.放置图片

5.1.导入[也可以在文件夹中选中直接拖放至FLASH CS的库中或者场景中]

在弹出框中选择所需图片。

5.2.类名关联[不做类关联的图片，解析时无法获取图片名称]

在库中选择刚导入的图片。右键点击，选择属性

将ActionScript导出 勾选，点确定。这样图片就成为了继承自Bitmap的类。基类名称就是他们的图片名。入下图

5.3在DisUI的继承类中放置图片，也就是刚刚的test_main中。库中选择图片，直接拖放至场景中就行了。注意场景当前所处的元件路径。

5.3.1直接放置入场景，这样的图片，默认锚点为(0,1)。也就是图片的左上角。[无法手动命名]

5.3.2如果想自定义锚点，就需要用元件来对图片进行包裹。推荐有专门的文件放置这些用来包裹图片的MC，免得重复创建。[可以命名]

5.3.2.1直接选中这张图，点击F8创建一个元件，在Registration:后面的9个锚点中选一个。

5.3.2.2如果是(0.1,0.3)这样比较特殊的锚点，创建元件后，在场景中直接双击，或者在库中双击进行编辑，摆放元件中图片的位置。如下图

十字为当前元件中的坐标原点。移动图片的位置，十字相对于图片的位置就是图片的锚点。

 5.4支持采集的属性，最后json对应的替换名列表。 如下

按照 ：属性缩写:含义 英文，这个格式来列表

namePath :图片名[默认全都是png后缀，目前不支持生成jpg后缀...未来修改，如何识别放置进来的图片是一张JPG，有待测试。]

6.放置文字

6.1 直接在工具栏中选文字项目，然后在场景中点击任意位置，就会创建出一个文字。

选中创建的文字，请确保它是 Dynamic Text 或 Input Text 中的一个。Static Text不予支持。

关于以上设置，不做描述，请自行了解。

锚点和坐标会根据Format中的横向对齐模式调整，左对齐->(0,1)，居中->(0.5,1)，右对齐->(1,1)

6.2 自定义锚点的情况下同图片，用元件进行包裹即可。注意被包裹的文字不能放缩，命名以包裹文字的那个元件在场景中的命名为主。

6.3 支持采集的文字属性，最后json对应的替换名列表。 如下

按照 ：属性缩写:含义 英文，这个格式来列表

w       :文本宽度 width

h       :文本高度 height

fn      :字体名[确保团队中成员都有这个字库->字体名称跟实际工程字体名的差异需要做键值映射->这样就能保持字体一直性。] fontName

mul   :是否多行[字段可有可无，有就是多行，没有就是单行] multiline

ya     :y方向的对其模式[默认只有"up"一个值，标示y方向上对其] y align

xa     :x方向的对其模式[left / center / right 中的一个] x align

t        :文字 text

fs      :字号 font size

cr      :颜色红 color red

cg     :颜色红 colorgreen

cb     :颜色红 colorblue

input :是否是输入文本[字段可有可无，有就是输入文本，没有就不是]

7 Rect

7.1.用来进行摆放，从而划定选区，设置范围。

7.1.2 在一些默认类中需要一些Rect来填充他们属性。

DisRoll必须用RectGreen来标示显示区域

DisRoll必须用RectRed来标示滚动内容的大小

九宫格图片需要一个任意Rect来标示中间能缩放的方形大小

DisUIBtn需要很多个Rect来标示选区。一般一个就够了，除非是形状不规则的按钮。

7.2 支持采集的属性，最后json对应的替换名列表。 如下

rx  : x坐标 rect x

ry  : y坐标 rect y

rw : 宽度 rect width

rh : 高度 rect height

rc : 类名[RectGreen / RectRed / ...] rect class

rn : 场景中命名 rect name

7.3 可以自己修改Rect的代码模板，决定存储方式。[这个在后面会详细说]

cocos2dx lua 为例 代码模板可以如下 [self.rects的定义需要在DisUI模板中写，这里是Rect的循环模板，因为Rect可能不是一个]

字典键值对的方式 : self.rects["${rn}"]=cc.rect(${rx},${ry},${rw},${rh})

数组的存放的方式 : table.insert(self.rects,cc.rect(${rx},${ry},${rw},${rh}))

属性如果不需要，可以不再模板中写[比如 rc 这个属性就没用到，虽然生成的json中有]

8 Special

8.1 由一个文字和一个显示对象构成。

文字必须是 "key=value" 的形式

通过代码模板可以变成对所在DisUI的key属性赋值，这样在FlashCS中就可以进行一些属性赋值。

另外一个显示对象无所谓，就是用来做个样子，在形象向上有个区分，不用特意的去读key=value的那个键值对。比如DisUI对齐于屏幕的九个基准点。如下

LT -> left top          -   T -> center top   -     RT -> right top    

|                                          |                                   |

LC -> left center    -   C -> center         -     RC -> right center 

|                                          |                                   |

LB -> left bottom   -   B -> bottom        -     RB -> right bottom 

8.2 支持采集的属性，最后json对应的替换名列表。 如下

key    : 键值对中的键  key

value : 键值对中的值  value

8.3 代码替换

当DisUI承载了这个Special之后，利用如下代码模板替换。以中间的Special来做例子，也就是上图alignMode=C的那个菱形。

self.${key}="${value}"

会变成

self.alignMode=“C”

自然self中就有了alignMode这个属性，值就是C。之后在代码支持中写关于C的对齐支持就可以了。

8.4 自定义组件中Special的用途。

如果你要自定义一个组件的话，组件中可能有一些参数的设置，这个时候就需要用到这个Special了。

当然只是设置参数的话，创建出一个Special还是比较复杂，还可以利用创建文字的方式创建Special

利用工具栏中的文字创建出一个文字，之后，对其进行特殊命名。

specialKey_xx的命名方式标示这个文字是一个用来取值的Special。其中的文字会被识别成键值对。

9.其他显示对象，九宫格等等。见下