• 湖北彩票官网

  • 湖北彩票官网

  • 湖北彩票官网

  • 熱門pao)ㄌ/h3>

湖北彩票官网

作者︰小輝(hui)_Ray  發(fa)布(bu)日期︰2020-02-20 07:24:11
Tag標簽︰白鷺  小游戲  
  • 前言︰

      在上一篇(pian)文章中著重介(jie)紹(shao)了H5小游戲開(kai)發(fa)的起步階段(duan),如Wing面(mian)板的使用,素材的處理,類的說明(ming)等等,那麼(me)今(jin)天(tian)主要是涉(she)及到場景(jing)的創建,loading的修改等等的代碼編寫。

      對于這一節,我在講解的過(guo)程tao)謝 褂玫街詼嗟睦嗷蚨韻螅 雜謁ta)們的具體用法,建議查(cha)看(kan)白鷺官(guan)方文檔。

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

    修改Loading

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

      如果你(ni)還(huai)有印象,應(ying)該記(ji)得我提過(guo)LoadingUI的實例(li)化的地方,並添加(jia)到stage。

      

      為了修改loading效(xiao)果,我們先打開(kai)LoadingUI.ts,我們可以看(kan)到在loading實例(li)化之(zhi)後,會執行createView()方法。

      為了將文本居中,將textField的寬度改成(cheng)舞(wu)台(tai)的寬度640,利用center實現水平居中。同(tong)時ben)軸調到適當的位置500。

      因為RES.ResourceEvent事件(jian)只能(neng)返(fan)回當前已加(jia)載數(shu)和(he)加(jia)載總數(shu)兩個參(can)數(shu),所以為了把加(jia)載進度更加(jia)直觀一點,我們一般寫成(cheng)百分比的形式。

      設(she)置進度的代碼如下(xia)︰

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

    創建游戲場景(jing)

      保存(cun)loadingUI.ts的修改後,接下(xia)來我們打開(kai)Main.ts,並進入到createGameScene()方法。

      為了方便(bian)後面(mian)的調用,我先創建一個初始化數(shu)據的方法。

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

      執行初始化方法後,保存(cun)並刷新瀏(liu)覽(lan)器就可以看(kan)到以下(xia)效(xiao)果啦。一個基本的場景(jing)就出(chu)來了。

       

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

      

     1 /** 2 * 創建分數(shu)欄(lan) 3 * create score container 4 */ 5 private TF_socre: egret.TextField; 6 private createScore(): void { 7  //為方便(bian)管理與設(she)置,把分數(shu)欄(lan)獨立于一個容器內 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  //添加(jia)的順序影響層級13  cont.addChild(bg);14  cont.addChild(title);15  cont.addChild(txt);16  //整個分數(shu)容器在設(she)計(ji)圖中的位置17  cont.x = 40;18  cont.y = 22;19  //標題和(he)分數(shu)在分數(shu)欄(lan)內部的位置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  //定義顏色、水平與垂直居中、字(zi)體大(da)小,初始字(zi)符、加(jia)粗等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  //將分數(shu)TextField實例(li)引用到Main類下(xia)的內部屬性值,方便(bian)其(qi)他方法調用並修改分數(shu)值35  this.TF_socre = txt;36  this.stage.addChild(cont);37 }

      大(da)同(tong)小異,創建時間欄(lan)的方法如下(xia)。

     1 /** 2 * 創建時間欄(lan) 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 }
    創建時間欄(lan)方法

      創建以上方法後,並在init()方法內通過(guo)this.createScore()和(he)this.createTime()調用,刷新瀏(liu)覽(lan)器可看(kan)到以下(xia)變(bian)化。

      

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

     

      接下(xia)來將繼續更新第四(si)篇(pian),敬請期待。

       轉載請注明(ming)出(chu)處,謝謝。

      

About IT165 -廣告服務(wu) -隱(yin)私聲明(ming) -版權申明(ming) -免責條款 -網站地圖 -網友(you)投稿 -聯(lian)系方式
本站內容來自于互聯(lian)網,僅供用于網絡技術(shu)學習,學習中請遵循相(xiang)關法律(lv)法規
湖北彩票官网 | 下一页