写在前面
EUI是一套基于Egret核心显示列表的UI扩展库,它封装了大量的常用UI组件,能够满足大部分的交互界面需求,即使更加复杂的组件需求,您也可以基于EUI已有组件进行组合或扩展,从而快速实现需求。
为了展示EUI的功能,我借助白鹭官网中的一个卡牌游戏DEMO,从0开始编写完成这个DEMO。其实这并不是一个完整的游戏,只是一个演示DEMO,亲自实现这个DEMO之后,应该能熟悉大部分的EUI操作,并且增加对egret游戏开发的理解。
点进去之后可以体验一下,把所有地方都点一点,感受一下所有的功能,接下来我们就要自己去动手实现了。(这里可以下载源码素材)不过这里的源码是编译之后的并不是源代码,不过我们只需要用到里面的素材,具体实现就让我一步一步自己来吧~~~初始化
新建好EUI项目(480 * 800),把刚刚下载的文件里面的source > resource > art 这个文件夹放在我们自己新建的项目中
按照之前的流程,现在删除新建的项目中多余的代码
上面还有个函数的调用要记得一起删掉
现在项目干净了~
Let's do it!
场景搭建
EUI最方便的地方就是能快速的搭建界面,只需要用鼠标拖动就可以搭建静态的界面
先来把游戏的素材放到加载组里
打开default.res.json
新建两个资源组分别放hero_goods和loading,其他的都放到preload组就好
现在稍微分析一下
这个游戏一共有五个场景:
loading
在主场景之前,其实还有一个loading需要先显示出来,这样用户就不会看到一片黑乎乎的加载过程,提高用户体验
根据我们之前设置的几个资源组,preload是游戏初始化需要加载的资源,我们的loading则需要在它之前就加载好,这样用户就能先看到loading页,so现在去写个loading
项目其实自带了一个很简陋的loading,我们可以再这个基础上来写
打开main.ts
先加载这个资源组里面的资源,然后再把loadingView添加到舞台
打开loadingUi.ts
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
public constructor() {
super();
// 当被添加到舞台的时候触发 (被添加到舞台,说明资源组已经加载完成)
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.createView, this)
}
private textField: egret.TextField; // 文本
private bgImg: egret.Bitmap // 背景图
private loadImg: egret.Bitmap // loading图标
private createView(): void {
this.width = this.stage.stageWidth
this.height = this.stage.stageHeight
// 背景图
this.bgImg = new egret.Bitmap()
this.bgImg.texture = RES.getRes('loading_jpg')
this.addChild(this.bgImg)
// loading图标
this.loadImg = new egret.Bitmap()
this.loadImg.texture = RES.getRes('loading2_png')
this.loadImg.anchorOffsetX = this.loadImg.width / 2
this.loadImg.anchorOffsetY = this.loadImg.height / 2
this.loadImg.x = this.width / 2
this.loadImg.y = this.height / 2
this.addChild(this.loadImg)
// 文本
this.textField = new egret.TextField();
this.addChild(this.textField);
this.textField.width = 480;
this.textField.height = 20
this.textField.y = this.height / 2 - this.textField.height / 2;
this.textField.size = 14
this.textField.textAlign = "center";
// 监听帧事件,每帧都让loading图片转动
this.addEventListener(egret.Event.ENTER_FRAME, this.updata, this)
}
private updata() {
// 旋转
this.loadImg.rotation += 5
}
// 这个函数在加载中会自动调用
public onProgress(current: number, total: number): void {
// 计算百分比
let per = Math.floor((current / total) * 100)
this.textField.text = `${per}%`;
}
}
loading实现完成~现在调试看看,在终端输入egret run -a(-a 表示修改代码保存后自动编译,你只需要在浏览器刷新就可以看到修改后的效果)
能看到loading页面了~
主场景