最近这两天看了关于H5游戏开发的一个教程,实践很短暂,看了很多理论的东西,现在呢也只是想回忆回忆关于EUI的部分知识吧

首先我了解了什么是Egret:

Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件。(纯粹属于个人理解)

其次我对以下几款软件的相关知识做了些了解:

Egret Engine(引擎),Egret Wing(编辑器),Texture Merger(可将零散纹理拼合为整图,同时也可以解析SWF、GIF动画,导出可供Egret使用的配置文件),Egret Feather(是一款粒子效果编辑器)ResDepot(是针对资源配置文件的创建,编辑和管理工具)等.......ps:现在我只看了这些吧还有很多相关软件

接下来我看了关于游戏的UI知识:

前期游戏UI是用的GUI,更新后更多的是在使用EUI。GUI过渡到EUI后改变了那些呢?新增加了什么呢?我带着这个疑问继续了解了下去。EUI和GUI相比,组件后立即返回宽高;现在的EUI只有addchild()系列方法,已经不存在addElement()方法,任意UI组件和普通显示对象都可以互相混合添加;GUI库里必须将皮肤声明为一个独立的EXML文件在引用皮肤,(如果皮肤需要反复使用建议使用这种方式),EUI里已经支持EXML的内部类定义方法,可以直接嵌入写在节点内;EUI运行时将EXML文件改为运行时解析,不在提前编译(GUI库里EXML文件是在命令行编译阶段编译成js文件);EUI库里EXML可以描述非皮肤对象;EUI支持动态数据绑定;EUI支持自动布局兼容旋转缩放;EUI库还可以主题匹配。

然后我了解了EUI的基础知识:

一个页面首先我先下手的就是它的UI布局,EUI的布局分为5种:

1、基本布局,指的就是默认的布局样式。在基本布局模式下,容器内的子项的定位方式取决于每一个子项的坐标设置;

2、水平布局,也就是横向布局。这种布局他会自动将所有的子项横着排序,然后你可以设置子项之间的间距(gap属性),horizontalAlign(水平对齐方式),verticalAlign(垂直对齐方式),padding系列属性,设置容器的内边距;

3、垂直布局,就是竖向的排列方式。有水平布局一样的属性;

4、网格布局,即做横向布局也做纵向布局,实现的效果就像格子一样,它除了可以设置padding属性以外,还可以设置horizontalGap(设置子项之间的水平距离),verticalGap(子项之间的垂直距离),coumnAlign(如何将完全可见列与容器宽度对齐),rowAlign(如何将完全可见列与容器高度对齐)

注意:columnAlign和rowAlign设置对于边界对齐有很重要的作用

5、自定义布局,顾名思义就是按照你想做的样子进行布局。自动布局可以完成调配屏幕的适配问题{完成屏幕适配可以分为两个步骤:1、舞台尺寸和设备屏幕的适配关系。2、内部UI界面与舞台尺寸的适配关系}自动布局也可以解决异步问题和失效验证机制。

以上布局最常用的用应该算是水平布局和垂直布局了,其中水平布局、垂直布局、网格布局,都会忽略子项上的坐标位置,所有子项的位置都将有布局统一管理。布局、控件和图片的结合基本上就算有简单的UI部件组成了。

完结了,今天就回忆到这里吧。写程序反正急不得,每天进一小步,总比原地踏步强。

上一篇:linux学习笔记-时间配置综述


下一篇:npm WARN install Refusing to install vue-router as a dependency of itself