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

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

复制基础组件到资源目录,然后F5刷新编辑器,即可看到资源组件树

然后Ctrl+N新建页面命名为ButtonTest,然后我们拖动左边的button到视图中,结果如下图:

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

在组件属性区,每个组件都有自己的属性,每个组件都有一些公用属性,比如:

name是组件实例的名字,x,y,width,height分别是组件坐标和宽高,var是组件实例的全局引用名,如果定义了这个,就可以在代码很方便的找到它。除了这些,mornui所有组件还有下面基础属性

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

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

Label是文本,设置text可以显示其内容,设置isHtml=true后,会显示html内容

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

stroke是文字描边,格式为(颜色,透明度,水平模糊量,垂直模糊量,强度,质量)比如红色描边可以定义为(0xff0000,1,5,5,2,1)

leading是段落之间的间距

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

TextArea是文本域,继承自TextInput,除了具有TextInput的属性外,额外多一个scrollBarSkin属性,可以用来设置滚动条皮肤

Button是按钮组件,通过skin可以设置按钮皮肤,sizeGrid定义了按钮9宫格拉伸

labelColors是按钮文本在各种状态的颜色值,分别为(正常状态,鼠标经过状态,鼠标点击状态,禁用状态),比如(0x32556b,0x32556b,0x32556b,0xC0C0C0)

toggle设定了是否是回弹按钮,其他一些属性和label类同

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

Image是图形组件,具有url属性,设置url既可以是连接类,也可以是一个路径,支持异步加载,同时也可以设置9宫格拉伸

Clip是位图切片,Clip类似flash的movieclip(动画剪辑),和Image类同,url既可以是资源连接类,还可以是一个路径动态加载

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

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

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

FrameClip是矢量图动画组件,和clip类似,不同的是FrameClip是MornUI唯一基于矢量图的组件

它的skin对象为Movieclip的连接类,可以设置动画间隔并进行播放

FrameClip组件的主要用途是UI特效,毕竟矢量图动画特效比位图动画要小很多,并且效果也好。

ProgressBar是进度条组件,value范围是0到1,可以设置9宫格拉伸

Slider是滑动条,可以通过滑动设置得到value值,min,max属性控制最大及最小值,tick设定了滑动单位值,allowBackClick定义是否允许点击背景滑动

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

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

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

visibleNum是下拉框列表一次显示的最大数量,如果label数超过这个数量,就会出现滚动条,通过scrollBarSkin可以设置滚动条皮肤

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

比如界面中同时选中两个按钮,通过快捷键Ctrl+B转换为容器,那么两个按钮就被包含在Box内,作为一个整体来控制

选中一个容器,通过快捷键Ctrl+U,可以去除这个容器,和上面做相反的工作

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

也可以通过Ctrl+B转换而来

Panel继承Container,除了具有相对属性外,增加了滚动条和遮罩效果,无论里面的图片有多大,panel只会显示特定区域,通过滚动可以看到其他区域

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

direction定义了tab的布局方向,是水平还是垂直

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

RadioGroup是单选按钮组,和Tab类似,可以设置labels=“单选1,单选2”进行设置,也可以通过direction属性选择布局的方向

RadioGroup也支持自定义布局,请参考教程《自定义Tab,Radiogroup,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和Tab一样,可以个性化自定义,请参考教程《自定义Tab,Radiogroup,List》

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

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

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

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

页面嵌套类似Flex的自定义控件,可以把一个界面嵌套到另外一个界面内,只需选中一个界面,拖动到另外界面内部即可

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

了解更多页面嵌套内容,可以参考教程《页面嵌套的使用》

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

在创建界面的时候,会让你选择用哪种视图类,你甚至可以自定义自己的视图类,封装自己的逻辑,然后在编辑器让界面都继承自此自定义视图类,这就是MornUI自定义灵活性的又一表现,详情请参考教程《自定义页面基类》

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

全部组件集合如下图:

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

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

这一切组件,全部开源,你可以任意改动和扩展,开发适合自己的需求东西,MornUI的一个重要特性就是灵活性,易扩展

所有这些,均免费,甚至可以商业应用,如果你再犹豫,我和我的小朋友就要惊呆了

THE END
1.网页制作编辑网页制作编辑招聘猎聘网页制作编辑招聘频道为您提供大量的网页制作编辑招聘信息,有超过10000多网页制作编辑招聘信息任你选寻,招聘网页制作编辑人才就来猎聘网页制作编辑招聘!求职找工作就用猎聘聊。https://www.liepin.com/s/17a8b35e5e7c29159d6f832739c5ee8f/
2.网页设计模板html代码,html网页设计代码作业模板示例命令提示符在当今这个数字化时代,网页设计模板和HTML代码的重要性不言而喻。本文将深入探讨网页设计模板的概念,分析HTML代码的构成,并提供实用的HTML代码示例,帮助您快速掌握网页设计的核心技巧。 精品网站模板:https://www.91084.com/ (已发布1000+款) 网页设计模板概述 https://www.163.com/dy/article/JJGB61D905568SD1.html
3.网页制作在线编辑ie浏览器在线编辑文档功能?1765人在问共 2 个回答快乐海燕oq 贡献2022年02月23日1、打开一个网页,将网页的地址复制。2、新建一个word文档,点击office按钮,点击“打开”;3、将网址粘贴在“文件名”这一栏里,并点击“打开”;4、打开后就可以对网页内容进行编辑了;5、编辑好后,依次点击office按钮,“另存为”、https://www.njanyou.cn/aygd/6648.html
4.Div+CSS网页制作实战教程项目2HTML网页文档的编辑在线免费阅读●掌握网页编辑软件的操作方法 ●掌握基本的HTML标记及其属性 任务2.1根据页面效果图切片 2.1.1 任务分析 某公司茶叶网站要展示企业形象和宣传产品,要求如下。 ●网站选色以绿色为主,代表健康和生机。 ●网站有一个较大的banner展示动画,展示产品和宣传企业形象。网站首页效果如图2-1所示。 https://fanqienovel.com/reader/7110094742423079949
5.网页制作软件免费版,从文本编辑到开发!一个优秀的网页,不仅需要有精美的设计,更需要精细的编程实现。对于许多非专业人士来说,网页制作软件便是他们实现优秀网站搭建的得力助手。本文我们将从文本编辑到开发全方位为您推荐几款出色的网页制作软件。https://pixso.cn/designskills/free-webpage-making-software/
6.以制作网页最简单的方法分享(快速入门网页制作)妙招大全网页制作是一个不断学习和实践的过程,通过持续学习新的技术和不断实践,你能够成为一名优秀的网页制作者,并不断提升自己的能力。 通过选择合适的网页编辑器、学习基础的HTML语言和CSS样式表、使用现成模板和优化工具,以及关注网页加载速度、响应式设计、交互效果等方面的考虑,你可以以最简单的方作出具有专业水平的网页。https://www.gnzyw.com/article-24607-1.html
7.Dreamweaver是一款强大的网页编辑软件。不仅可以编辑网页,还能Dreamweaver是一款强大的网页编辑软件。不仅可以编辑网页,还能制作网页制作中需要的素材,如设计图片、动画等。 A. 正确 B. 错误 题目标签:软件设计网页如何将EXCEL生成题库手机刷题 如何制作自己的在线小题库 > 手机使用 分享 反馈 收藏 举报 参考答案: B 复制 纠错https://www.shuashuati.com/ti/afdf0b1b999b42ea8910651f465e1d7a.html?fm=bdbds17e8f9dca9386b7b1442c6d30b3f5085
8.怎么使用文本编辑器制作一个网页好的,现在你已经成功创建了第一个网页!这是一个令人激动和兴奋的时刻!整个过程只需要键入几个单词就https://ask.zol.com.cn/x/25513828.html
9.html网页制作软件有哪些html教程HTML网页制作软件有哪些? 在线编辑器: W3School 在线编辑器:免费、简便的在线编辑器,适合初学者和快速编辑。 CodePen:在线交互式编辑器,包含预先构建的代码片段和社区支持。 Glitch:流行且功能丰富的在线代码编辑器,支持实时协作和版本控制。 桌面软件: Visual Studio Code:流行且功能丰富的跨平台代码编辑器,支持代码自https://www.php.cn/faq/736092.html
10.第七章FrontPage网页制作入门第七章FrontPage网页制作入门 FrontPage2000是一个创建站点和设计网页的优秀软件,是目前最常用的一种所见即所得的网页制作与站点管理工具,它能将网页界面自动翻译成对应的HTML标记语言,故不需要用户掌握很深的网页制作技术,就可以进行添加表格、图像、声音、动画和电影等的编辑,制作出精美的网页。它作为系列套装软件Officehttp://www.360doc.com/content/10/1105/11/1206742_66785058.shtml
11.网页制作教程网代码编辑器 本网站推荐了一些常用的代码编辑器,包括Sublime Text、Visual Studio Code等,帮助您提升编写代码的效率。 调试工具 本网站推荐了一些常用的网页调试工具,包括浏览器开启者工具、Firebug等,帮助您快速定位和解决网页中的问题。 通过这个网页制作教程网,您可以系统地学习和掌握网页制作的技能。无论是初学者还是https://www.yncaili.com/32197.html
12.《网页的制作》教案优秀第一章、网页的基础知识(1学时) (1)Internet基础知识 (2)www简介 (3)网页制作的技术和工具介绍 第二章、超文本编辑语言HTML(8学时) (1)HTML文件的基本结构 (2)文字和段落标记 (3)列表标记 (4)图片标记 (5)表格标记 (6)超链接标记 (7)表单标记 https://www.jy135.com/jiaoan/2102408.html
13.1.1编辑文本制作“公司简介”网页视频在线观看1.1 编辑文本制作“公司简介”网页 举报 大胡子妖精 关注288 信息 分享: 直播热点 下载APP领会员 直播中 小言儿~ 直播中 丽丽感谢家人宠爱 直播中 悠然~服务 视频 自媒体分成 分类 电视剧 电影 综艺 56出品 高校 粤语 搞笑 音乐人 生活 游戏 时尚 娱乐 科技 教育 汽车 少儿 母婴 拍客 帮助 帮助中心 未成年https://www.56.com/u12/v_MTM3NTE1MTM3.html
14.网页制作软件AdobeDreamweaver2021v21.1.0绿色版Adobe Dreamweaver 2021中文版是行业知名的网页制作软件,能够支持对多种网页格式内容的编辑修改,前端设计师们的必备软件,拥有大量的实用功能以及素材模板,为你的网页设计提供无限的想法。专业网页设计软件,集网页制作和管理网站于一身的网页代码编辑器。利用支持 HTML、CSS、 等内容的 Web 设计软件,网页前端设计师可以快https://ma.eyy168.com/232.html
15.java网页在线编辑java怎么制作网页java网页在线编辑 java怎么制作网页 01、让背景图不滚动 IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动: <Body Background="图片文件" bgproperties="fixed"> 02、让你的网页无法另存为 <noscript></noscript> 03、让IFRAME框架内的文档https://blog.51cto.com/u_16099322/11766923
16.Dreamweaver网页制作:HTML在线编辑器的基本调用方法在网页制作的过程中,可以借助html的在线编辑器,它有两种基本调用方法。https://www.yiihuu.com/twjc/32755.html
17.免费网页制作:从零到一,构建你的在线梦想它们不仅提供了丰富的模板、插件和易于上手的编辑器,还允许你无需编程知识,即可打造出个性化的网站。这些平台是我多次实战中的得力助手,让我深刻理解到,即使是零基础的初学者,也能快速上手,实现自己的网页梦想。 1. 选择适合你的平台 挑选一个界面友好、功能强大的免费网页制作平台,是成功的第一步。不同平台各有https://www.batmanit.cn/blog/j/29390.html
18.网页制作教学设计(通用10篇)能够用于开发H5网页的工具很多,今天以iH5软件工具为平台,学习使用H5快速制作网页。 活动3:找“共性”,探“个性”,认识iH5软件。 (1)使用课前申请的账号,登录网址:,进入在线编辑平台。 (2)对比Photoshop界面,认识iH5界面,找出相同之处和不同之处。 小结:相同之处:___(菜单栏、工具面板、编辑区) 不同之处:__https://xiaoxue.ruiwen.com/jiaoxuesheji/319726.html
19.网页设计与制作问题与解决方法在使用Dreamweaver编辑网页时,经常需要插入一些图像,如果要插入的图像很多,按照常规方法来操作就显得非常麻烦,可以利用拖动技巧来很好地解决这个问题。下面介绍网页设计与制作问题与解决方法,希望对您有所帮助。 1. 如何使用3种类型的CSS样式? CSS样式表在网页制作中一般有3种方式的用法,那么具体在使用时该采用哪种用法https://www.qinxue365.com/jsjzx/Web_Design/504740.html
20.网页构建工具,网页制作,网页开发,在线制作网页,html编辑器0 百度 360 神马 搜狗 谷歌 收录 0 0 0 0 - 反链 0 0 - 0 - 最近访问 www.yooho0.netm.oneplusmedia.cnwww.trusmatic.comwww.krjbj.comoeeee.comwww.yongchanggd.cnbfldgc.comm.zmty365.comshbeiping.cnqjsnfjt.comwww.kings3d.comm.wmkere.comwww.hairpins88.comivyuan.comhsjctc.comwww.520.lthttp://www.tzsensor.com/tools/seo/www.jixiangdaojia.com