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：时间关系，原本本文打算写更多的，但是为了保证延续性，先发这部分了。

 

　　接下来将继续更新第四篇，敬请期待。

　　转载请注明出处，谢谢。