什么是Morn UI?

MornUI是Flash轻量级,高性能,可视化UI解决方案
MornUI全面支持HTML5,基于LayaBox

具有以下优势:

1.轻量级,Morn UI库以精简,直观为设计理念,代码轻量,能快速上手,减少学习成本,Morn UI全部库总大小不到30K

2.可视化,Morn UI提供强大的可视化编辑器,布局及属性均可在编辑器直观设置,实现UI和逻辑分离,让美术和程序轻松合作

3.高性能,Morn UI设计之初就以高性能为主要目标,以位图为基础,利用延迟渲染机制,实现了高性能

4.易扩展,无论UI组件还是编辑器插件,都非常易于扩展,编辑器支持即改即用,轻松实现个性化

5.自动资源管理,Morn编辑器自动管理UI资源,以灵活的方式打包资源(jpg+alpha)

6.同时支持位图和矢量图,并自动生成UI代码

7.支持多项目,支持多视图开发,支持代码视图,支持协同开发及svn管理

8.支持多语言,内置语言包管理器及提取工具,快速国际化

9.Morn比flex轻量高效,比flash IDE组件化开发更为方便
 

如果遇到BUG欢迎反馈 反馈方式: QQ群:51451081

github托管地址:https://github.com/yungzhu/MornUI

目录结构:

builder-----UI编辑器

MornUILib---UI库源码

ExtendLib---UI扩展库及源码

demo--------示例代码

doc---------文档及教程

plugins-----编辑器插件及源码
已邀请:

cuixueying

赞同来自: charley

   网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足。

Morn UI学习了Flash IDE使用的方便性(比如图层功能,对齐,缩放,层次切换等等),同时吸取Flex组件化的特点,抛弃了Flex臃肿的结构,具有轻量级,高性能,可视化,易扩展等特性,满足了各种个性化开发需求
 
[Morn UI系列教程]Morn简介及使用教程
使用可视化UI编辑器(Morn Builder)制作游戏界面
提示:编辑器需要32位java环境
1.下载Morn UI编辑器及MornUILib组件库源码(因无法发送链接,请联系laya官方。也可自行下载)
2.解压并打开builder下的Main.exe,点击【创建新项目】,然后输入项目名和项目存放的位置

QQ图片20151106182142.png

 
3.确定并创建好后,在左边资源面板,点击“添加资源”打开项目的资源目录(在morn里,图片即组件,编辑器根据资源前缀识别成对应的组件,命名详见《Morn资源命名规则》)

2.png

4.复制资源到刚才打开的assets目录,图片要以文件夹的方式存放,编辑器会以文件夹为单位打包为对应的swf(本文最下面提供了组件资源下载,也可以在官网demo里面找到)

3.png

5.在编辑器内按快捷键F5刷新,就能看到资源组件树了(如果提示java失败,请先下载一个32位java环境,然后再编辑器使用快捷键Ctrl+F5强制刷新资源)

4.png

6.在编辑器内,使用快捷键Ctrl+N新建一个页面,起名叫Page1

5.png

7.拖拽左面资源区任意组件到视图内,摆放拼装成需要的界面。还可以通过右面的属性面板,设置各种参数以控制不同的显示效果

6.png

很简单吧,编辑器有很多功能,大部分功能都能在菜单和快捷工具栏中找到,并对应快捷键方便使用,有时间可以详细了解下

20.png

更多教程请找度娘
 
 
下面说一下如何

用代码控制UI

Morn UI库的使用
 
1.新建AS3项目到上面的项目目录(我这里是E:\test)(这里创建as3项目用的是FlashDevlop,用FlashBuilder类同,注意编译目录改为bin,默认为bin-debug)

7.png

2.解压上面下载的MornUILib文件,复制MornUILib/src下的源码到刚才新建的AS3项目的src目录下

8.png

3.在编辑器内,选中按钮,然后在属性面板var里面输入个名称,比如btn

9.png

4.编辑器内用快捷键Ctrl+S保存,然后按快捷键F12发布代码。发布成功后,Page1会对应生成Page1UI.as并默认发布到项目src/game/ui下,所用资源自动打包为swf,默认发布到项目bin/assets下(路径可配置,快捷键F9)
10.png

5.现在要使用这个页面,那么我们新建一个类,继承自这个Page1UI类,就可以随意控制它了(UI和逻辑分离)

11.png

6.在主文档程序Main.as里面,初始化Morn,加载资源,并实例化这个Page1页面

12.png

7.编译项目,至此就能正确的运行了

13.png

非常简单吧!!!
 

layabox

赞同来自: Ismeluo

作为Flash原生工具链开发的程序员来说,Morn UI是最优秀实用的轻量级,高性能,可视化UI解决方案。

要回复问题请先

商务合作
商务合作