好久没更新博客了，从去年开始白鹭（Egret）就一直很火，那么作为Unity开发者，必须要了解一下，首先先简单介绍下。
Egret
Egret是一套HTML5游戏开发解决方案，产品包含Egret Engine，Egret Wing，EgretVS，Res Depot，Texture Merger，TS Conversion，Egret Feather，Egret Inspector，DragonBones，Lakeshore等。而核心产品是Egret Engine，是一个基于TypeScript语言开发的一个HTML5游戏引擎，其余的大多是开发和辅助工具。
关于这个引擎和工具方面的介绍，我就不多说了，以下是白鹭的下载地址，咋们直接从安装完成后讲起。
操作流程
Egret官网：http://egret.com/
当我们打开白鹭引擎的的界面，然后点击创建项目,选好你的项目类型，可以在这里面设置你的游戏项目的画布大小，旋转方向，然后点击创建
创建好的项目如果想编辑的话点击后面那个类似于翅膀的符号，但是前提是你必须确保你的引擎安装了Wing工具
打开后的界面，那么首先看下左侧的文件目录，在我们刚刚开始接触白鹭的时候，我们所需要的了解两个文件夹就足够了，resource/assets 这里放的是我们的游戏资源（图片、声音等），另一个就是src文件下的Main.ts文件，因为我们一切的代码都是在这里面编写的
大家都应该当我们接触一个新的IDE的时候，都会给有一个Example，那么接下来我们来运行下我们这个白鹭，看看它的效果到底有没有像网上说的那样炫酷。快捷键F5，当然也可以选择项目然后点击调试 PS：如果出现下图所示，那么要改个参数配置即可
将 command 的 egret 改成 /usr/local/bin/egret 即可
效果其实还真不错
好了，现在大家都会使用了，那我们来看看核心内容-代码部分，打开我们的Main.ts部分
屏幕快照 2018-08-10 上午10.59.29.png
createAgmeScene这个方法是是我们的主要编辑的一个方法
通过一个图片的名字去加载一张图片
图片的名字在这里面设置
那么我们来使用下这个白鹭，看看流程和Unity有什么不一样，首先将createGameScene里面的内清空，将rungame中this.startAnimation(result);注释掉
// 声明一个文本框，类似于c和oc
private textfield: egret.TextField;
// 创建游戏场景
private createGameScene() {
// 创建一个Bitmap类型的变量来获取我们的图片
let bg = this.createBitmapByName("bg_jpg");
// this代表的就是当前这个舞台，将获取的图片添加到舞台上，类似iOS的addView
this.addChild(bg);
// 拿到舞台的宽和高，这个舞台的宽和高是在我们创建游戏的时候设置的
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight
// 然后赋值给图片
bg.width = stageW;
bg.height = stageH;
// 创建一个文本
this.textfield = new egret.TextField;
// 设置内容
this.textfield.text = "这里是大展的简书\n来了就不要走了";
// 字体大小
this.textfield.size=50;
// 对齐方式
this.textfield.textAlign = egret.HorizontalAlign.CENTER;
// 颜色
this.textfield.textColor = 0xFFFFFF;
// 将文本添加到舞台
this.addChild(this.textfield);
// 位置确认
this.textfield.x = this.stage.width/2 - this.textfield.width/2;
this.textfield.y = this.textfield.height/2;;
}
然后再次运行，现在你就可以在你的舞台上随意添加东西了，总之，每次创建一个东西，想显示在舞台上就需要this.addChild(你创建的东西)
网友评论