白鹭引擎（一）

2018-08-10 本文已影响818人大展

好久没更新博客了，从去年开始白鹭（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;;
    }