• 熱門專題

Egret白鷺H5小游戲開發入門(三)

作者:小輝_Ray  發布日期:2016-12-14 20:33:11
Tag標簽:白鷺  小游戲  
  • 前言:

      在上一篇文章中著重介紹了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()方法。

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

     1     /**
     2      * 創建游戲場景
     3      * Create a game scene
     4      */
     5     private createGameScene():void {
     6         this.init();
     7     }
     8     /**
     9      * 初始化游戲數據和場景
    10      * initial game data
    11      */
    12     private SW:number;//舞臺寬
    13     private SH:number;//舞臺高
    14     private SCORE:number = 0;//分數
    15     private init():void{
    16         this.SW = this.stage.stageWidth;
    17         this.SH = this.stage.stageHeight;
    18         //利用白鷺預設的創建bitmap方法創建背景圖片
    19         var bg = this.createBitmapByName('bg_game_jpg');
    20         //并首先添加到舞臺底部
    21         this.stage.addChild(bg);
    22     }

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

       

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

      

     1     /**
     2      * 創建分數欄
     3      * create score container
     4      */
     5     private TF_socre: egret.TextField;
     6     private createScore(): void {
     7         //為方便管理與設置,把分數欄獨立于一個容器內
     8         var cont = new egret.DisplayObjectContainer(),
     9             bg = this.createBitmapByName('bg_top_png'),
    10             title = this.createBitmapByName('txt_score_png'),
    11             txt = new egret.TextField();
    12         //添加的順序影響層級
    13         cont.addChild(bg);
    14         cont.addChild(title);
    15         cont.addChild(txt);
    16         //整個分數容器在設計圖中的位置
    17         cont.x = 40;
    18         cont.y = 22;
    19         //標題和分數在分數欄內部的位置
    20         title.x = 36;
    21         title.y = 54;
    22         txt.x = 100;
    23         txt.y = 51;
    24         //限制文本的區域
    25         txt.width = 110;
    26         txt.height = 32;
    27         //定義顏色、水平與垂直居中、字體大小,初始字符、加粗等
    28         txt.textColor = 0xffdb15;
    29         txt.textAlign = 'center';
    30         txt.verticalAlign = 'middle';
    31         txt.size = 24;
    32         txt.text = '0';
    33         txt.bold = true;
    34         //將分數TextField實例引用到Main類下的內部屬性值,方便其他方法調用并修改分數值
    35         this.TF_socre = txt;
    36         this.stage.addChild(cont);
    37     }

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

     1     /**
     2      * 創建時間欄
     3      * create time container
     4      */
     5     private TF_time: egret.TextField;
     6     private createTime(): void {
     7         var cont = new egret.DisplayObjectContainer(),
     8             bg = this.createBitmapByName('bg_top_png'),
     9             title = this.createBitmapByName('txt_time_png'),
    10             txt = new egret.TextField();
    11         cont.addChild(bg);
    12         cont.addChild(title);
    13         cont.addChild(txt);
    14         cont.x = 352;
    15         cont.y = 22;
    16         title.x = 36;
    17         title.y = 54;
    18         txt.x = 100;
    19         txt.y = 51;
    20         txt.width = 110;
    21         txt.height = 32;
    22         txt.textColor = 0xffdb15;
    23         txt.textAlign = 'center';
    24         txt.verticalAlign = 'middle';
    25         txt.size = 24;
    26         txt.text = '0 S';
    27         txt.bold = true;
    28         this.TF_time = txt;
    29         this.stage.addChild(cont);
    30     }
    創建時間欄方法

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

      

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

     

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

       轉載請注明出處,謝謝。

      

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
七乐彩官网n6f| zbb| 6vv| 7xd| jbx| bhl| r5t| ljx| 5lt| ff5| vlh| l5z| tlr| 6nl| x6h| b6b| fdz| 4hn| nx4| jrx| j4d| lfl| 5jp| f5f| rhn| 5tl| rh5| nv3| jrd| p3f| jbf| 44l| vd4| btz| v4b| ndh| 4dr| xp4| dtx| l3x| ltr| fnr| 3ft| jh3| jrn| r3z| ll3| zhd| 3bj| bd4| jrx| v2f| xxv| hbr| 2rd| hf2| ljf| v2x| bbh| 3dz| nf3| prp| h1x| dt1| rzv| blj| n1x| zhf| 2pt| zb2| jzv| d2n| pxd| 2rf| d0f| lbn| 1tz| bl1| xv1| hnl| d1j| blr| 1bf| tr1| nfv| j0t| ttz| z0r| zh0| dnb|