当前位置: 代码迷 >> Web前端 >> [Morn UI系列课程]进一步了解Morn UI及工作流
  详细解决方案

[Morn UI系列课程]进一步了解Morn UI及工作流

热度:386   发布时间:2013-08-25 10:49:56.0
[Morn UI系列教程]进一步了解Morn UI及工作流

MORN UI工作流

Morn Builder不仅仅是对Flash IDE的改进,传统的开发协作是以fla为基础,由于fla是二进制文件,在以svn等版本控制软件协作下,合并过程中会出现各种各样的问题

而Morn UI界面是以文本方式为基础的,所以能够轻松通过svn进行管理协作,并增加了更为有效的分工,提高美术,策划及程序的工作效率

Morn UI游戏开发流程图:

morn_ui_30

由于有可视化编辑器支持,UI制作人员既可以是美术,又可以是策划或程序担当

?

进一步了解MORN UI

1.了解组件

Morn UI有26个常用组件和9个管理类,组件功能单一,同时提供详细的API文档,很容易学习和掌握。Morn UI高效的封装了游戏开发中常用的组件,使用后仅给项目代码增加30多K的大小,非常轻量

Morn UI组件学习了Flex组件的生命周期,基于位图及延迟渲染,实现了组件的高性能。内置加载管理器,时间管理器,资源管理器,日志管理器,拖拽管理器,渲染管理器,鼠标提示管理器,多语言管理器等高效封装的管理类,有效组织UI代码和逻辑。

组件结构如下:

morn_ui_31

2.组件的生命周期

Morn UI组件内部生命周期如下:

构造函数 →?preinitialize(预初始化)?→?createChildren(创建子对象)?→?initialize(初始化)?→?属性计算?→?callLater?→ 最终渲染

其中preinitialize可以做修改属性默认值等操作,createChildren用来创建子对象,initialize时此子对象已被创建,可以对子对象进行修改

callLater可以用来延迟计算渲染,最后是提交渲染,合理利用这个生命周期,就能减少组件逻辑计算及渲染,提高性能。

3.什么是Clip和FrameClip,他们有什么区别

Clip是位图切片,可以作为位图动画进行播放,还可以作为图标集合,用来控制第几个帧的图标,非常好用

FrameClip和Clip类同,但FrameClip是矢量图切片,是对MovieClip动画的扩展,作为Morn UI唯一的矢量图组件,设计的目的是用来做UI特效,毕竟矢量图动画相比位图动画要小很多,用它做UI动画效果是最合适不过了

Clip和FrameClip可以在编辑器内进行预览,只要选中组件,按回车键控制播放

4.Box,Container,Panel,View,Dialog这些容器有什么区别

以上组件中,Box,Container,Panel,View,Dialog都是容器组件,但是他们功能各有不同

Box是基础容器类,封装了很多容器操作方法

Container继承自Box,实现了相对定位的功能器,如left,right,top,bottom等属性,还增加了centerX,centerY等剧中对齐等属性

Panel继承自Container,除了拥有相对功能外,还实现了遮罩效果和滚动条

View是视图类,继承自Container,View实现了界面基于xml的结构解析功能

Dialog是对话框,继承自View,在view基础上增加了show,popup,close等窗口弹出功能,同时增加了拖拽,模式窗口等功能

5.怎么自定义页面基类

View和Dialog是编辑器所有页面的基类,假如你不想直接用这两个类作为页面基类,你可以自定义页面基类,增加自己的逻辑,实现个性化需求(详细参考《自定义页面基类》)

6.怎么设置拖动对话框

Dialog默认是不可拖动的,以下两种方式可以设置拖动区域,从而实现拖动功能:

1)在编辑器内拖动一个image,命名为drag,即可实现拖动区域设置(实际运行中image不可见)
2)或者通过代码视图直接设置拖拽区域属性(dragArea)即可使窗体拖动(格式:x:Number=0, y:Number=0, width:Number=0, height:Number=0)

7.怎么自定义Tab,Radiogroup,List等组件的显示

Tab,Radiogroup,List也是容器,继承自Box,这三个组件既支持参数设置的方式实现,又支持自定义的方式实现更为灵活的组件视图

方式如下:

在页面内摆放几个按钮,每个按钮的位置颜色等属性可以随意设置,然后把按钮的name属性分别命名为item0,tiem1,item2…,选中这些按钮,Ctrl+B转换为Tab,这样就完成了自定义的Tab,RadioGroup,List类同

更详细参考《自定义Tab,Radiogroup,List》

8.怎么设置组件9宫格拉伸

所有位图组件均有gridSize属性,实现了9宫格支持拉伸

gridSize是一个字符串数字,数值和Flex默认的不太一样,格式是(左边距,上边距,右边距,下边距),这样使用起来更方便,例如下图(图片被放大以方便查看)

morn_ui_32

?

gridSize应该设置为gridSize=“3,26,3,5”

9.什么是组件赋值操作,如何对UI赋值

Morn赋值功能,是把原来对UI获取,设置等操作的封装,将开发者的焦点集中到对数据操作上,大大简化了UI开发的复杂性,一定要灵活应用

赋值是对组件属性修改的简化操作,类似Flex里面的数据绑定。赋值是通过dataSource属性设置的
例如页面内有一个name属性为“labe1”的文本,和一个name属性为”btn2″的按钮

简单赋值:this.dataSource={{“labe1″:”设置文本的text属性”},{“btn2″:”按钮名称”}};
通过上述操作,就改变了label的text属性和button的label属性

复杂赋值可以更改组件的任意属性,比如:

this.dataSource={{“labe1″:{text:”设置text”,size:12}},{“btn2″:{label:”按钮名称”,alpha:0.5}}};

List的赋值请参考后续教程

进一步了解编辑器

Morn UI编辑器实现了很多方便性的功能,比如图层,对齐功能,放大缩小,右键拖动,多项目支持,界面预览,代码模式,插件,属性设置,资源管理等等,大部分功能均可在菜单内找到。

1.图层的应用

Morn UI学习Flash IDE的图层功能,图层是在可视化设计时,用来控制多个显示对象的利器,通过图层可以控制组件之间的前后关系,还可以批量控制组件的显示隐藏,是否锁定等等。

同图层之间可以通过快捷键切换顺序,不同图层之间也可以切换,快捷键请参考编辑器菜单

2.内嵌模式和加载模式

内嵌模式和加载模式都是针对UI界面的XML而言的,内嵌模式是将UI视图XML结构内嵌在UI类里面,加载模式是把所有界面XML压缩打包为二进制数据,使用时再加载解析

内嵌模式的优点:清晰明了,方便调试,无需加载

加载模式的优点:和主程序分离,美术修改UI后,而无需编译主程序即可看到效果,还可以单独对UI二进制包进行加密,防止别人窥视

加载模式使用:在编辑器内F9设置内,选中加载模式,然后在项目代码中增加下面代码,设置二进制文件路径(默认文件名为ui.swf,可修改)

Config.uiPath = “ui.swf”;

3.设置组件默认属性设置及资源压缩比例

在资源树内,双击资源,可以打开组件默认属性设置和资源压缩比例设置

组件默认属性设置:设置后,再拖动这个组件,会默认把这个设置应用到视图上,而无需再次设置

资源压缩比例设置:可以设置资源的是否压缩以及压缩的比例

4.多语言

编辑器内置多语言插件,会自动提取界面语言包,轻松实现游戏国际化

5.自定义资源,代码的发布目录

快捷键F9打开项目设置,里面可以修改很多个性化设置

扩展MORN UI

1.自定义UI组件

自定义组件需要以下三个步骤:

1)书写组件类,实现IComponent接口(或者直接继承Component类),如果是容器,实现IBox接口(或者直接继承Box类)

2)调用View下的registerComponent方法注册组件

3)生成swc库,放置到编辑器swcs目录,同时增加组件配置文件,格式参考MornUILib.xml(详细请参考《扩展Morn UI组件》)

2.使用控件,自定义控件

Morn支持自定义控件(又称界面嵌套),实现界面的封装和复用,只需拖动一个界面到另外一个界面内部,即可实现控件复用,还可通过修改此控件的runtime属性来设置控件的逻辑类(详细请参考《界面嵌套的使用》)

3.扩展编辑器,开发编辑器插件

Morn UI编辑器支持插件扩展,以实现自定义功能,实现插件非常简单,只要继承至编辑器扩展基类PluginBase,然后编译成swf放到编辑器下的plugins目录即可,代码可以参考PluginDemo语言包插件实例源码,详细流程请参考教程《扩展Morn编辑器,开发编辑器插件》

Morn UI是一个既灵活有强大的开发工具,拥有它,能大大提高工作效率和效果

更多请关注后续教程