Egret白鷺H5小游戲開發入門（三）

前言：

　　在上一篇文章中着重介紹了H5小游戲開發的起步階段，如Wing面板的使用，素材的處理，類的說明等等，那么今天主要是涉及到場景的創建，loading的修改等等的代碼編寫。

　　對於這一節，我在講解的過程中會使用到眾多的類或對象，對於它們的具體用法，建議查看白鷺官方文檔。

　　文檔地址：http://edn.egret.com/cn/docs/page/639

修改Loading

　　上一節我們講到即將創建場景createGameScene()的時候就結束了，這一節在我們正常創建場景之前，我們先修改一下loading頁的效果。畢竟它是最先進入我們視野的頁面。

　　如果你還有印象，應該記得我提過LoadingUI的實例化的地方，並添加到stage。

　　

　　為了修改loading效果，我們先打開LoadingUI.ts，我們可以看到在loading實例化之后，會執行createView()方法。

　　為了將文本居中，將textField的寬度改成舞台的寬度640，利用center實現水平居中。同時將y軸調到適當的位置500。

　　因為RES.ResourceEvent事件只能返回當前已加載數和加載總數兩個參數，所以為了把加載進度更加直觀一點，我們一般寫成百分比的形式。

　　設置進度的代碼如下：

    public setProgress(current, total):void {
        var num = Math.floor(current / total * 100);
        this.textField.text = num.toString() + " %";
    }

創建游戲場景

　　保存loadingUI.ts的修改后，接下來我們打開Main.ts，並進入到createGameScene()方法。

　　為了方便后面的調用，我先創建一個初始化數據的方法。

    /**
     * 創建游戲場景
     * Create a game scene
     */
    private createGameScene():void {
        this.init();
    }
    /**
     * 初始化游戲數據和場景
     * initial game data
     */
    private SW:number;//舞台寬
    private SH:number;//舞台高
    private SCORE:number = 0;//分數
    private init():void{
        this.SW = this.stage.stageWidth;
        this.SH = this.stage.stageHeight;
        //利用白鷺預設的創建bitmap方法創建背景圖片
        var bg = this.createBitmapByName("bg_game_jpg");
        //並首先添加到舞台底部
        this.stage.addChild(bg);
    }

　　執行初始化方法后，保存並刷新瀏覽器就可以看到以下效果啦。一個基本的場景就出來了。

 　　

　　接下來，我們將頭部的素材的提取出來，另建一個方法用於創建數據欄。

　　

    /**
     * 創建分數欄
     * create score container
     */
    private TF_socre: egret.TextField;
    private createScore(): void {
        //為方便管理與設置，把分數欄獨立於一個容器內
        var cont = new egret.DisplayObjectContainer(),
            bg = this.createBitmapByName("bg_top_png"),
            title = this.createBitmapByName("txt_score_png"),
            txt = new egret.TextField();
        //添加的順序影響層級
        cont.addChild(bg);
        cont.addChild(title);
        cont.addChild(txt);
        //整個分數容器在設計圖中的位置
        cont.x = 40;
        cont.y = 22;
        //標題和分數在分數欄內部的位置
        title.x = 36;
        title.y = 54;
        txt.x = 100;
        txt.y = 51;
        //限制文本的區域
        txt.width = 110;
        txt.height = 32;
        //定義顏色、水平與垂直居中、字體大小，初始字符、加粗等
        txt.textColor = 0xffdb15;
        txt.textAlign = "center";
        txt.verticalAlign = "middle";
        txt.size = 24;
        txt.text = "0";
        txt.bold = true;
        //將分數TextField實例引用到Main類下的內部屬性值，方便其他方法調用並修改分數值
        this.TF_socre = txt;
        this.stage.addChild(cont);
    }

　　大同小異，創建時間欄的方法如下。

    /**
     * 創建時間欄
     * create time container
     */
    private TF_time: egret.TextField;
    private createTime(): void {
        var cont = new egret.DisplayObjectContainer(),
            bg = this.createBitmapByName("bg_top_png"),
            title = this.createBitmapByName("txt_time_png"),
            txt = new egret.TextField();
        cont.addChild(bg);
        cont.addChild(title);
        cont.addChild(txt);
        cont.x = 352;
        cont.y = 22;
        title.x = 36;
        title.y = 54;
        txt.x = 100;
        txt.y = 51;
        txt.width = 110;
        txt.height = 32;
        txt.textColor = 0xffdb15;
        txt.textAlign = "center";
        txt.verticalAlign = "middle";
        txt.size = 24;
        txt.text = "0 S";
        txt.bold = true;
        this.TF_time = txt;
        this.stage.addChild(cont);
    }

　　創建以上方法后，並在init()方法內通過this.createScore()和this.createTime()調用，刷新瀏覽器可看到以下變化。

　　

 

 　　PS：時間關系，原本本文打算寫更多的，但是為了保證延續性，先發這部分了。

 

　　接下來將繼續更新第四篇，敬請期待。

 

 　　轉載請注明出處，謝謝。