[网页游戏开发]使用编辑器制做界面

Morn UI一个显著优点就是Morn Builder(可视化编辑器)，实现界面设计的所见即所得，《Morn简介及使用教程》文章中已经介绍了编辑器的简单使用方法，今天给你们介绍一下Morn UI每一个组件的属性及在编辑器的简单使用方法。

打开编辑器，在E:\MornCompTest下建立了新UI项目命名为MornCompTest

复制基础组件到资源目录，而后F5刷新编辑器，便可看到资源组件树

而后Ctrl+N新建页面命名为ButtonTest，而后咱们拖动左边的button到视图中，结果以下图：

编辑器分为菜单工具栏区，界面列表区，资源组件区，设计试图区，组件属性区，图层区等6个区域

基础属性

在组件属性区，每一个组件都有本身的属性，每一个组件都有一些公用属性，好比：

 

name是组件实例的名字，x，y，width，height分别是组件坐标和宽高，var是组件实例的全局引用名，若是定义了这个，就能够在代码很方便的找到它。除了这些，morn ui全部组件还有下面基础属性

 

属性这么多，美术同窗要问怎么记呢？其实无需记忆，编辑器内鼠标放在属性文字上，会自动提示属性的名称和格式，很方便吧

下面咱们一一介绍下各个组件的使用方法和属性含义

基础可视化组件

1.Label组件

 

Label是文本，设置text能够显示其内容，设置isHtml=true后，会显示html内容

autoSize属性若是设置为left，就是自适应文本，宽度会随着文本长短的变化而变化

label还能够设置skin，做为文本的背景图片，同时支持sizeGrid，用来9宫格拉伸背景(详细格式请参考《深刻了解Morn UI》)

stroke是文字描边，格式为（颜色，透明度，水平模糊量，垂直模糊量，强度，质量）好比红色描边能够定义为(0xff0000,1,5,5,2,1)

leading是段落之间的间距

2.TextInput组件

 

TextInput是输入框，继承自Label，除了具备Label的属性外，额外多了上面三个属性，了解便可

3.TextArea组件

 

TextArea是文本域，继承自TextInput，除了具备TextInput的属性外，额外多一个scrollBarSkin属性，能够用来设置滚动条皮肤

4.Button组件

Button是按钮组件，经过skin能够设置按钮皮肤，sizeGrid定义了按钮9宫格拉伸

labelColors是按钮文本在各类状态的颜色值，分别为（正常状态，鼠标通过状态，鼠标点击状态，禁用状态），好比(0x32556b, 0x32556b, 0x32556b, 0xC0C0C0)

toggle设定了是不是回弹按钮，其余一些属性和label类同

5.LinkButton，CheckBox，RadioButton组件

LinkButton是下划线按钮，CheckBox是多选按钮，RadioButton是单选按钮，三者均继承自Button，属性也和Button同样

6.Image组件

 

Image是图形组件，具备url属性，设置url既能够是链接类，也能够是一个路径，支持异步加载，同时也能够设置9宫格拉伸

7.Clip组件

Clip是位图切片，Clip相似flash的movieclip(动画剪辑)，和Image类同，url既能够是资源链接类，还能够是一个路径动态加载

clip须要设置clipX属性和clipY属性，分别是图片行个数和列个数，支持多行多列，还能够设置clipWidth和clipHeight，这个是单个图标的宽高，程序会根据这个宽高算出clipX和clipY，好比上面图片行个数为10，列个数为1

Clip便可用来作icon，经过frame属性切换当前显示第几帧，又可做为位图动画，设置interval播放间隔进行播放，在编辑器选中clip，而后按回车键能够预览动画

frame就是当前切片显示的索引，从0开始

8.FrameClip组件

 

FrameClip是矢量图动画组件，和clip相似，不一样的是FrameClip是Morn UI惟一基于矢量图的组件

它的skin对象为Movieclip的链接类，能够设置动画间隔并进行播放

FrameClip组件的主要用途是UI特效，毕竟矢量图动画特效比位图动画要小不少，而且效果也好。

9.ProgressBar组件

ProgressBar是进度条组件，value范围是0到1，能够设置9宫格拉伸

10.Slider 滑动条

 

Slider是滑动条，能够经过滑动设置获得value值，min，max属性控制最大及最小值，tick设定了滑动单位值，allowBackClick定义是否容许点击背景滑动

11.HSlider，VSlider组件

HSlider是水平滑动条，VSlider是垂直滑动条，属性和Slider类同

12.ScrollBar组件 

ScrollBar是滚动条组件，其中scrollSize定义了每次滚动的数量

13.ComboBox组件

ComboBox是下拉框组件，labels属性能够设置下拉框列表值，好比label=“列表1,列表2”，用逗号隔开

visibleNum是下拉框列表一次显示的最大数量，若是label数超过这个数量，就会出现滚动条，经过scrollBarSkin能够设置滚动条皮肤

 

容器组件

1.Box组件

Box是容器组件，容器在界面上不能被直观看到，也不能经过拖动组件树建立，而是经过转换方式把某些内容转换为容器

好比界面中同时选中两个按钮，经过快捷键Ctrl+B转换为容器，那么两个按钮就被包含在Box内，做为一个总体来控制

 

选中一个容器，经过快捷键Ctrl+U，能够去除这个容器，和上面作相反的工做

2.Container组件

 

Container是相对定位容器，继承自Box，增长了left，right，top，bottom等相对定位属性，同时增长了centerX，centerY等居中对齐属性

也能够经过Ctrl+B转换而来

3.Panel面板

Panel继承Container，除了具备相对属性外，增长了滚动条和遮罩效果，不管里面的图片有多大，panel只会显示特定区域，经过滚动能够看到其余区域

4.Tab组件

Tab是切换标签按钮组，能够设置labels属性设置标签，好比labels=“标签1,标签2”，多个用逗号隔开

direction定义了tab的布局方向，是水平仍是垂直

假如Tab里面的按钮摆放不规则，颜色都不同，想个性化，那么就须要自定义Tab布局，请参考教程《自定义Tab，Radiogroup，List》

5.RadioGroup组件

RadioGroup是单选按钮组，和Tab相似，能够设置labels=“单选1,单选2”进行设置，也能够经过direction属性选择布局的方向

RadioGroup也支持自定义布局，请参考教程《自定义Tab，Radiogroup，List》

6.List组件

 

建立List：

添加一个label并选中，Ctrl+B转换为Box，设置Box的name属性为render，再选中Box经过Ctrl+B转换为List，设置List的行数，列数和间隔属性便可(分别为repeatX,repeatY,spaceX,spaceY)。

为list添加滚动条：
双击list，进入list内部，拖动一个滚动条到list内，修改name属性为scrollBar，便可自动识别，详细可参看Demo示例

最终结构以下：

<List x="214" y="274" repeatX="1" repeatY="5" spaceX="0" spaceY="5" var="list">
<Box x="0" y="0" name="render">
<Label text="label" x="27" y="4" name="label"/>
</Box>
<VScrollBar skin="png.comp.vscroll" x="89" y="3" width="15" height="150" name="scrollBar"/>
</List>

List和Tab同样，能够个性化自定义，请参考教程《自定义Tab，Radiogroup，List》

List是列表组件，继承自Box，repeatX，repeatY分别是列表项x，y方向每页最多显示的数量，spaceX和spaceY是列表项之间的间隔值，scrollSize是每次滚动的个数

List是比较经常使用的组件之一，同时也是最复杂，最灵活的组件，List还有不少高级用法，请参考教程《List高级使用教程》

7.ViewStack组件

ViewStack是视图导航器组件，做为一个容器，用来存储多个视图，经过selectedIndex进行切换显示

使用方式：选择要包含进ViewStack的对象，分别命名为item0，item1，item2…，而后全选，Ctrl+B转换为ViewStack容器

最终结构以下：

<ViewStack x="364" y="328">
<Label text="view1111" name="item0" x="0" y="0"/>
<LinkButton label="view222" x="47" y="0" name="item1"/>
</ViewStack>

8.页面嵌套

 

页面嵌套相似Flex的自定义控件，能够把一个界面嵌套到另一个界面内，只需选中一个界面，拖动到另外界面内部便可

这样作能够实现自定义的显示组件，同时达到多界面复用的效果，还可经过修改此控件的runtime属性来设置嵌套界面的逻辑类

了解更多页面嵌套内容，能够参考教程《页面嵌套的使用》

视图组件

1.View组件

View是视图类，一个界面就是一个视图，视图类实现了界面结构的解析，这里具备很大的灵活性

在建立界面的时候，会让你选择用哪一种视图类，你甚至能够自定义本身的视图类，封装本身的逻辑，而后在编辑器让界面都继承自此自定义视图类，这就是Morn UI自定义灵活性的又一表现，详情请参考教程《自定义页面基类》

2.Dialog组件

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

所有组件集合以下图：

游戏开发所用的组件，Morn UI都精炼的提供了，这么多功能，仅仅给你的代码增长30多K的大小，真正的轻量级

而且每一个组件都是通过深思熟虑，同时保证简单好学好用，又要高性能，而且可视化布局，还考虑到自定义扩展等特性

这一切组件，所有开源，你能够任意改动和扩展，开发适合本身的需求东西，Morn UI的一个重要特性就是灵活性，易扩展

全部这些，均免费，甚至能够商业应用，若是你再犹豫，我和个人小朋友就要惊呆了