荣耀彩票代理

  • 热门专题

Egret白鹭H5小游戏开发入门(三)

作者:小辉_Ray  发布日期:2016-12-14 20:33:11
  • 前言:

      ZAISHANGYIPIANWENZHANGZHONGZHEZHONGJIESHAOLEH5XIAOYOUXIKAIFADEQIBUJIEDUAN,RUWingMIANBANDESHIYONG,SUCAIDECHULI,LEIDESHUOMINGDENGDENG,NEIMEJINTIANZHUYAOSHISHEJIDAOCHANGJINGDECHUANGJIAN,loadingDEXIUGAIDENGDENGDEDAIMABIANXIE。

      DUIYUZHEIYIJIE,WOZAIJIANGJIEDEGUOCHENGZHONGHUISHIYONGDAOZHONGDUODELEIHUODUIXIANG,DUIYUTAMENDEJUTIYONGFA,JIANYICHAKANBAILUGUANFANGWENDANG。

    荣耀彩票代理  WENDANGDIZHI:http://edn.egret.com/cn/docs/page/639

    修改Loading

    荣耀彩票代理  SHANGYIJIEWOMENJIANGDAOJIJIANGCHUANGJIANCHANGJINGcreateGameScene()DESHIHOUJIUJIESHULE,ZHEIYIJIEZAIWOMENZHENGCHANGCHUANGJIANCHANGJINGZHIQIAN,WOMENXIANXIUGAIYIXIAloadingYEDEXIAOGUO。BIJINGTASHIZUIXIANJINRUWOMENSHIYEDEYEMIAN。

      RUGUONIHAIYOUYINXIANG,YINGGAIJIDEWOTIGUOLoadingUIDESHILIHUADEDIFANG,BINGTIANJIADAOstage。

      

    荣耀彩票代理  WEILEXIUGAIloadingXIAOGUO,WOMENXIANDAKAILoadingUI.ts,WOMENKEYIKANDAOZAIloadingSHILIHUAZHIHOU,HUIZHIXINGcreateView()FANGFA。

      WEILEJIANGWENBENJUZHONG,JIANGtextFieldDEKUANDUGAICHENGWUTAIDEKUANDU640,LIYONGcenterSHIXIANSHUIPINGJUZHONG。TONGSHIJIANGyZHOUDIAODAOSHIDANGDEWEIZHI500。

    荣耀彩票代理  YINWEIRES.ResourceEventSHIJIANZHINENGFANHUIDANGQIANYIJIAZAISHUHEJIAZAIZONGSHULIANGGECANSHU,SUOYIWEILEBAJIAZAIJINDUGENGJIAZHIGUANYIDIAN,WOMENYIBANXIECHENGBAIFENBIDEXINGSHI。

    荣耀彩票代理  SHEZHIJINDUDEDAIMARUXIA:

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

    创建游戏场景

      BAOCUNloadingUI.tsDEXIUGAIHOU,JIEXIALAIWOMENDAKAIMain.ts,BINGJINRUDAOcreateGameScene()FANGFA。

      WEILEFANGBIANHOUMIANDEDIAOYONG,WOXIANCHUANGJIANYIGECHUSHIHUASHUJUDEFANGFA。

     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     }

      执行初始化方法后,保存并刷新浏览器就可以看到以下效果啦。一个基本的场景就出来了。

       

    荣耀彩票代理  JIEXIALAI,WOMENJIANGTOUBUDESUCAIDETIQUCHULAI,LINGJIANYIGEFANGFAYONGYUCHUANGJIANSHUJULAN。

      

     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     }

      DATONGXIAOYI,CHUANGJIANSHIJIANLANDEFANGFARUXIA。

     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:SHIJIANGUANXI,YUANBENBENWENDASUANXIEGENGDUODE,DANSHIWEILEBAOZHENGYANXUXING,XIANFAZHEIBUFENLE。

     

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

       ZHUANZAIQINGZHUMINGCHUCHU,XIEXIE。

      

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规