《菜鸟教程》 EUI卡牌游戏制作

写在前面

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页面了~

主场景