Egret入門了解

0.前言

　　這個星期沒有什么事做，就想找點技術了解一下。前段時間看過Egret，用來開發HTML5小游戲。一開始以為很麻煩的，但是經過這兩天了解了一下，如果用這個游戲引擎來開發一些簡單的游戲，還是蠻方便的。為什么會了解這個，是因為有個同事是開發Android的，是開發那種普通APP，就是一些簡單的界面，跟硬件收發一下數據，然后展現出來。總體開發沒有難點的，就是用Android開發那種界面交互效果很差，好看一點的呢，開發效率又很低。我就跟他提出，可以用html5畫一些界面和一些動畫效果。經過這兩天了解，發現基本的交互是可以的。就是不知道放到APP里面會不會效果不好。

　　基本原理是，用Egret開發一個小動畫，帶互動功能。Android端APP在里面使用WEB進行顯示，類似於在APP中啟動一個小型的HTTP服務器。具體我也不是很懂。然后APP和我用Egret開發的網頁兩者的通信就使用WebSocket進行通信，這一步都只是初步想法。具體沒有進行實現，只是覺得利用WEB的開發效率來降低APP開發的復雜度還是不錯的。

　　這一篇博客，不會講很多知識，就是了解一下白鷺引擎Egret而已。

1.下載開發軟件

　　直接在這里進行下載，https://www.egret.com/products/engine.html 在這里下載最新版。

　　下載最新版后，在這個類似引擎商店進行下載，對與寫個HelloWorld就使用EgretWing這個IDE就可以了，其他的暫時用不到，具體可以在官網進行了解。

2.新建工程

　　打開Egret Wing IDE，新建工程，文件->新建工程->新建EUI工程

　　創建完后，直接按F5運行，就可以看到效果了。其他的不用管，看src目錄下Main.ts文件，這個就是源代碼了。至於其他目錄和其他配置文件這個就看官網介紹就可以了，這多說也沒有什么意義的。

3.了解基本代碼

　　具體的代碼就下面這些了。用的是TypeScript語法 。

class Main extends egret.DisplayObjectContainer {
    //一些全局變量
    private loadingView: LoadingUI;
    private car1: egret.Bitmap;
    private car2: egret.Bitmap;
    private start: egret.Bitmap;
    private pause: egret.Bitmap;
    private pause_start: egret.Bitmap;
    private stop: egret.Bitmap;
    private topMask: egret.Shape;
    private line: egret.Shape;
    private icon: egret.Bitmap;
    private colorLabel: egret.TextField;
    private textfield: egret.TextField;
    private left_mm: number;
    private right_mm: number;
    private run_left_1: egret.Bitmap;
    private run_left_2: egret.Bitmap;
    private run_right_1: egret.Bitmap;
    private run_right_2: egret.Bitmap;
    private speed: number;
    private isPause: boolean;

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {
        //設置加載進度界面
        //Config to load process interface
        this.loadingView = new LoadingUI();
        this.stage.addChild(this.loadingView);

        //初始化Resource資源加載庫
        //initiate Resource loading library
        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");
    }

    /**
     * 配置文件加載完成,開始預加載preload資源組。
     * configuration file loading is completed, start to pre-load the preload resource group
     */
    private onConfigComplete(event: RES.ResourceEvent): void {
        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
        RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
        RES.loadGroup("preload");
    }

    /**
     * preload資源組加載完成
     * Preload resource group is loaded
     */
    private onResourceLoadComplete(event: RES.ResourceEvent) {
        if (event.groupName == "preload") {
            this.stage.removeChild(this.loadingView);
            RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
            RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
            this.createGameScene();
        }
    }

    /**
     * 資源組加載出錯
     *  The resource group loading failed
     */
    private onItemLoadError(event: RES.ResourceEvent) {
        console.warn("Url:" + event.resItem.url + " has failed to load");
    }

    /**
     * 資源組加載出錯
     *  The resource group loading failed
     */
    private onResourceLoadError(event: RES.ResourceEvent) {
        //TODO
        console.warn("Group:" + event.groupName + " has failed to load");
        //忽略加載失敗的項目
        //Ignore the loading failed projects
        this.onResourceLoadComplete(event);
    }

    /**
     * preload資源組加載進度
     * Loading process of preload resource group
     */
    private onResourceProgress(event: RES.ResourceEvent) {
        if (event.groupName == "preload") {
            this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
        }
    }

    /**
     * 創建游戲場景
     * Create a game scene
     */
    private createGameScene() {
        let sky = this.createBitmapByName("bg_png");
        this.addChild(sky);
        let stageW = this.stage.stageWidth;
        let stageH = this.stage.stageHeight;
        sky.width = stageW;
        sky.height = stageH;

        this.showMessage();

        //增加兩輛車
        let car1 = this.createBitmapByName("car0_png");
        this.addChild(car1);
        car1.width = 40;
        car1.height = 80;
        car1.x = 90;
        car1.y = 400;
        this.car1 = car1;
        let car2 = this.createBitmapByName("car2_png");
        this.addChild(car2);
        car2.width = 40;
        car2.height = 80;
        car2.x = 240;
        car2.y = 400;
        this.car2 = car2;

        //增加開始按鈕
        let start = this.createBitmapByName("startGameBtn_png");
        start.width = 160;
        start.height = 50;
        start.x = 100;
        start.y = 350;
        start.touchEnabled = true; //設置可以進行觸摸
        this.start = start;
        this.addChild(start);


        let run_left_1 = this.createBitmapByName("runleft_png");
        let run_left_2 = this.createBitmapByName("runleft_png");
        let run_right_1 = this.createBitmapByName("runright_png");
        let run_right_2 = this.createBitmapByName("runright_png");
        this.run_left_1 = run_left_1;
        this.run_left_2 = run_left_2;
        this.run_right_1 = run_right_1;
        this.run_right_2 = run_right_2;
        run_left_1.width = 80;
        run_left_1.height = 480;
        run_left_2.width = 80;
        run_left_2.height = 480;
        run_left_1.x = 0;
        run_left_1.y = 0;
        run_left_2.x = 0;
        run_left_2.y = 480;
        run_right_1.width = 80;
        run_right_1.height = 480;
        run_right_2.width = 80;
        run_right_2.height = 480;
        run_right_1.x = 280;
        run_right_1.y = 0;
        run_right_2.x = 280;
        run_right_2.y = 480;
        this.addChild(this.run_left_1);
        this.addChild(this.run_left_2);
        this.addChild(this.run_right_1);
        this.addChild(this.run_right_2);
        this.run_left_1.visible = false;
        this.run_left_2.visible = false;
        this.run_right_1.visible = false;
        this.run_right_2.visible = false;

        //增加停止 暫停按鈕
        //放在跑道上面
        let pause = this.createBitmapByName("pause_png");
        pause.width = 50;
        pause.height = 50;
        pause.x = 250;
        pause.y = 10;
        pause.touchEnabled = true; //設置可以進行觸摸
        pause.visible = false;
        this.pause = pause;
        this.addChild(pause);
        let pause_start = this.createBitmapByName("start_png");
        pause_start.width = 50;
        pause_start.height = 50;
        pause_start.x = 250;
        pause_start.y = 10;
        pause_start.touchEnabled = true; //設置可以進行觸摸
        pause_start.visible = false;
        this.pause_start = pause_start;
        this.addChild(pause_start);
        let stop = this.createBitmapByName("stop_png");
        stop.width = 50;
        stop.height = 50;
        stop.x = 300;
        stop.y = 10;
        stop.touchEnabled = true; //設置可以進行觸摸
        stop.visible = false;
        this.stop = stop;
        this.addChild(stop);

        this.isPause = true;

        //初始化兩個小車移動路程為0
        this.left_mm = 0;
        this.right_mm = 0;

        this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickStart, this);
        RES.getResAsync("description_json", this.startAnimation, this);
    }

    /**
     * 根據name關鍵字創建一個Bitmap對象。name屬性請參考resources/resource.json配置文件的內容。
     * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
     */
    private createBitmapByName(name: string) {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }

    /**
     * 描述文件加載成功，開始播放動畫
     * Description file loading is successful, start to play the animation
     */
    private startAnimation(result: string[]) {
        let parser = new egret.HtmlTextParser();

        let textflowArr = result.map(text => parser.parse(text));
        let textfield = this.textfield;
        let count = -1;
        let change = () => {
            count++;
            if (count >= textflowArr.length) {
                count = 0;
            }
            let textFlow = textflowArr[count];

            // 切換描述內容
            // Switch to described content
            textfield.textFlow = textFlow;
            let tw = egret.Tween.get(textfield);
            tw.to({ "alpha": 1 }, 200);
            tw.wait(2000);
            tw.to({ "alpha": 0 }, 200);
            tw.call(change, this);
        };

        change();
    }

    /**
     * 定義公司產品信息
     */
    private showMessage(){
        let topMask = new egret.Shape();
        topMask.graphics.beginFill(0xFF0000, 0.5);
        topMask.graphics.drawRect(0, 0, this.stage.stageWidth, 172);
        topMask.graphics.endFill();
        topMask.y = 33;
        this.addChild(topMask);
        this.topMask = topMask;

        let icon = this.createBitmapByName("egret_icon_png");
        this.addChild(icon);
        icon.x = 26;
        icon.y = 33;
        this.icon = icon;

        let line = new egret.Shape();
        line.graphics.lineStyle(2, 0xffffff);
        line.graphics.moveTo(0, 0);
        line.graphics.lineTo(0, 117);
        line.graphics.endFill();
        line.x = 172;
        line.y = 61;
        this.addChild(line);
        this.line = line;

        let colorLabel = new egret.TextField();
        colorLabel.textColor = 0xffffff;
        colorLabel.width = this.stage.stageWidth - 172;
        colorLabel.textAlign = "center";
        colorLabel.text = "JL 藍牙運動XXX";
        colorLabel.size = 24;
        colorLabel.x = 172;
        colorLabel.y = 80;
        this.addChild(colorLabel);
        this.colorLabel = colorLabel;

        let textfield = new egret.TextField();
        this.addChild(textfield);
        textfield.alpha = 0;
        textfield.width = this.stage.stageWidth - 172;
        textfield.textAlign = egret.HorizontalAlign.CENTER;
        textfield.size = 24;
        textfield.textColor = 0xffffff;
        textfield.x = 172;
        textfield.y = 135;
        this.textfield = textfield;
    }
    /**
     * 自定義一些事件 // 所有的觸摸事件都會在這里進行捕獲
     */
    private onClickStart(event: egret.Event) {
        //debugger;
        //console.log("click start" + event);
        if(event.target == this.start){
            //刪除提示信息
            this.removeChild(this.topMask);
            this.removeChild(this.icon);
            this.removeChild(this.line);
            this.removeChild(this.colorLabel);
            this.removeChild(this.textfield);
            this.removeChild(this.start);

            this.run_left_1.visible = true;
            this.run_left_2.visible = true;
            this.run_right_1.visible = true;
            this.run_right_2.visible = true;
            this.pause.visible = true;
            this.stop.visible = true;
            this.speed = 5;
            this.isPause = false;

            this.removeEventListener(egret.Event.ENTER_FRAME, this.enterFrameHandler, this);
            this.addEventListener(egret.Event.ENTER_FRAME, this.enterFrameHandler, this);
        }else if(event.target == this.stop){
            console.log("stop");
            this.onClickStop();
        }else if(event.target == this.pause ||event.target == this.pause_start){
            console.log("pause");
            this.onClickPause();
        }
        //this.backGroud.start();
        //正中間顯示時間
        //左右兩邊顯示距離

        //left 接受事件，並處理小車運動
        //right 接受事件，並處理小車運動

        //通過websocket發送接收數據，然后畫動畫
        //http://www.cnblogs.com/yangxiao/p/4686729.html
    }

    /**
     * 逐幀運動
     */
    public enterFrameHandler(event: egret.Event) : void{
        var y = this.run_left_1.y;
        if(y >= 480){
            y = -460;
        }else{
            y = y + this.speed;
        }
        this.run_left_1.y = y;
        this.run_right_1.y = y;
        y = this.run_left_2.y;
        if(y >= 480){
            y = -460;
        }else{
            y = y + this.speed;
        }
        this.run_left_2.y = y;
        this.run_right_2.y = y;
        
    }
    /**
     * 停止
     */
    public onClickStop(): void{
        this.removeEventListener(egret.Event.ENTER_FRAME, this.enterFrameHandler, this);
        this.isPause = true;
        //this.speed = 0;
    }
    /**
     * 暫停
     */
    public onClickPause(): void{
        if(this.isPause == true){
            this.isPause = false;
            this.pause.visible = true;
            this.pause_start.visible = false;
            this.addEventListener(egret.Event.ENTER_FRAME, this.enterFrameHandler, this);
        }else{
            this.isPause = true;
            this.pause.visible = false;
            this.pause_start.visible = true;
            this.removeEventListener(egret.Event.ENTER_FRAME, this.enterFrameHandler, this);
        }
    }
}

4. 代碼解釋

　　第3-22行 是一些簡單的全局變量定義
　　loadingView 是默認的加載動畫
　　car1 car2 是兩輛小車
　　start pause pause_start stop 是一些按鈕
　　topMask line icon colorLabel textfield 是開始前的一些提示信息
　　run_left_1 run_left_2 run_right_1 run_right_2 是背景中左右兩邊綠色道路的移動
　　speed 是速度
　　isPause 表示是否暫停
　　第24-27行 就是一個構造函數，並注冊一個事件監聽器，表示舞台開始的時候就調用onAddToStage函數
　　第29-98行 這些是默認提供的
　　第103-211行 是創建場景 依次 背景圖片、兩輛小車、開始按鈕等圖片信息
　　里面還有一些設置坐標信息， 舞台大小 480X360 然后各個坐標都是絕對坐標，具體項目可以設置為按比例設置坐標。
　　最后的 this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClickStart, this); 這句就是加上觸摸事件監聽器，
　　該工程中所有的事件都在這里進行處理。
　　第307-346行 就是一些事件的處理
　　當按下開始按鈕時，就啟動egret.Event.ENTER_FRAME幀運動監聽器事件，按下暫停就取消該事件。
　　小車的移動就是左右兩邊的綠色樹木的相對后移而已。具體可以看第351行的enterFrameHandler函數。

5.運行界面

　　這是一個會動的界面。可以通過點擊右上角切換是否運動。

6.多說兩句

　　其實啊，用這個開發效率還是很高的，運行效率的話就一般的，用Web的效率也就那樣了，不過隨着手機性能的提高，用這個開發一些中小型游戲還是沒有問題的。egret的官方資料還是比較全面的，入門也簡單，對於我有js基礎，看了一下Demo和API基本一兩天就可以進行實際開發了。

 

參考資料:

http://www.cnblogs.com/yangxiao/p/4686729.html
http://developer.egret.com/cn/github/egret-docs/Engine2D/getStarted/helloWorld/index.html

工程下載: http://files.cnblogs.com/files/wunaozai/EgretHelloWorld.zip

本文地址: http://www.cnblogs.com/wunaozai/p/6540474.html