You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
let BitmapObj:egret.Bitmap;BitmapObj=this.createBitmapByName("button_png");BitmapObj.touchEnabled=true;//关键是这个BitmapObj.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onButtonClick,this);
Egret是一套HTML5游戏开发解决方案,旨在为h5提供更加方便的开发体验。总的来说
egret
的功能还是很强大的,最近接手的一个需求的时候使用了egret
,使用完之后感觉很棒,把自己的一些经验积累下来。egret
的官方文档地址在这里,API很详细。既然是写使用总结,还是从最简单的安装到使用吧,虽然官方文档里面也写得很清楚(捂脸)。
安装
安装地址移步这里
Egret Engine
即可此时我的
egret
引擎有两个版本,如果你想安装新的版本,可以点击上面图片面板中的"安装其他版本",进行下载,然后将解压之后的安装包拖进安装面板即可。还要说的一点就是建议安装一个开发
egret
的编辑器egret wing
,安装方式如下:点击上面图片面板中的左侧边栏的“工具”栏,就会出现对应的一些工具:
找到相对应的这个工具,并点击
下载
即可新建项目
打开安装的
egret wing
,并且点击如下位置或者直接到“文件->新建项目"中进行建立新的项目:此时会弹出一个项目类型的面板,根据你的需要选择一种项目类型就行。这里我选择的是
Egret Eui
项目,然后会弹出如下面板:选择你所需要的库并填写相应的项目目录以及项目名称就大功告成了
运行
你可以直接在
egret wing
中进行构建,也可以直接在命令行中进行运行:-a
表示会实时监听你文件的变化并且构建编译。回车之后就会自动跳转到浏览器中,打开的就是你项目的初始的样子:
这说明项目已经运行成功了。
egret目录结构
egret使用的是
typescript
实现的,初始项目目录结构如下:其中不同文件夹对应的功能如下:
egret技术细节
项目的运行流程
打开
main.js
文件(项目的入口文件),项目运行的时候是首先执行的createChildren()
函数,该函数主要功能是加载了一些资源,并且监听了配置文件加载的事件,主要是下面这行代码进行起监听作用:当配置文件加载完成之后就会执行下面的
onConfigComplete()
,在这个函数里面你就可以load
一些图片资源了。并进行监听图片资源组是否加载成功:这里面监听了图片的"加载完成、加载中、资源组加载出错、单个资源加载出错“的事件。所以若是项目中有加载资源的进度条的要求,就可以通过
onResourceProgress
这个函数进行相应的处理记住,对于已经监听的事件,若是不需要了或者监听完了,要及时取消,否则就会触发很多问题。
例如在
onConfigComplete()
函数里面就及时地取消了CONFIG_COMPLETE
事件。当图片资源组加载完成之后,就可以获取图片并且渲染到页面中。
移步到
onResourceLoadComplete()
,代码如下:如上,首先是先取消了事件的监听(足以可见及时取消事件的监听是有多么重要),然后开始渲染页面。
根据代码逻辑直接跳转到
startCreateScene()
,在这个函数里面,只是获取了一些资源并且绘制了一些图案,然后add
到舞台中。这样整个项目就完成的构建到渲染页面的整个过程。容器对象
首选我们在渲染页面的函数
startCreateScene()
将this
和this.stage
进行打印,如下所示:从上图可以看出,
this.stage
是包含this
,至少从视图的层级上来看。7个children
分别是执行this.addChild('元素')
之后的结果。而且越排在后面的child
深度越浅。也是官网中深度管理的这一章讲述的内容,越在后面,层级越高,也就是在z轴方向上处于最上面。当然你也可以按照如下方式自己设计元素的显示层级:也可以如下面所以获取层级对象:
事件
在一个h5页面中,难免少不了对事件的一些处理,比如对按钮的点击事件。
项目示例中已经列举了一个
demo
,如下:至于点击之后要触发的逻辑可以卸载
onButtonClick
中。这里是引用了eui.Button
这个组件,默然可以进行点击。但是不是所有的点击事件只能建立在按钮这种元素上呢,其实不是。例如对于egret.Bitmap
类的元素,也可以监听其点击事件,只需要如下设置:对于元素是否含有点击事件,可以到官网的对应api查看。
缩放模式和旋转模式
对于这个部分的内容,我还是觉得直接使用一个文档的地址会比较直观一点。
对于不同的项目,可能需要的显示模式也不一样。
对于强制横屏显示的h5可以直接在
html
中设置data-orientation="landscape"
即可如何实现视频帧播放
轮播
上面代码是获取资源的纹理对象,
RES.getRes
是针对的已经加载完成的资源,没有加载完成会显示为空。获取成功之后并存放在对应数组中。不断遍历,就会重复播放。
只播一次
对于只播一次的情况,就需要在播放完最后一帧的情况下取消事件的监听即可。
如何自定义组件
对于建立了
eui
项目的文件目录,就会在resource-skins
中找到对应的exml
文件。如果想自定义一个组件,就需要执行如下步骤:exml
文件就行,,然后在egret wing
中进行绘画视图。如下图所示:例如对于button控件来说,你可以自定义其他的控件,并且在2中选择需要添加的控件元素,在中间面板进行编辑,然后在 4 区域中进行设置属性(如
width,height,x,y
等属性),最后在 3 中就会自动生成相应的源码了。src
文件夹中建立相应的ts文件,并且使其继承eui.component
,代码如下:resource-default.thm.json
中按照所给格式添加你定义的组件即可bug记录点
将
webgl
改为canvas
即可在资源未加载完成就使用
RES.getRES()
需要在资源加载完成之后的回调里面再使用,否则资源会为空。
ios不能自动播放背景音乐
需要给当前的
stage
添加一个事件(如点击事件)来设置其开始播放scroller
组件滑动默认是可以上下左右滑动,需要设置一个属性值来控制只能在垂直方向进行滑动bounces : boolean
是否启用回弹,当启用回弹后,ScrollView中内容在到达边界后允许继续拖动,在用户拖动操作结束后,再反弹回边界位置在ios端播放音频会出现下面的问题,如下图所示:
这个
egret
官方给出的回应是如下:android
的uc浏览器播放不出声音,需要将音频改成如下格式:仍在试坑中,后续bug会补上
总结
egret对于一些h5场景还是很使用的。而且文档详尽,上手比较简单。
The text was updated successfully, but these errors were encountered: