zoukankan      html  css  js  c++  java
  • Egret 学习之 入口函数 及开始编写程序(三)

    1,Egret的程序入口:

    C和java是以一个main函数作为入口,但egret类似于ActionScript 是以一个文档类作为入口,确切的说是以这个文档类的构造函数作为入口;

    2,文档类的构造函数即egret程序的入口函数,可以看到入口函数内有这样一行代码:

    this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this)

    目前只需要知道这行代码保证了onAddToStage方法执行时,文档类实例已被添加到舞台中,并且在onAddToStage方法内,this.stage 属性已经有效,其指向舞台对象。

    3,在Main.ts 中找到创建游戏场景的createGameScene()方法,清空里面的所有内容,及其后面的所有方法,重新ctrl+s自动构建,然后点击调试,会发现在自动打开的Chrome浏览器中,不像之前显示的游戏页面,而是什么都没有了,现在开始输入代码,编程;

    现在先重新写一个背景:

    输入var bg:egret.Shape = new egret.Shape();  //创建一个egret.Shape的对象bg,egret.Shape对象有绘图功能,绘制背景的工作就利用这个对象来完成;

    Egret 中官方提供的类都在包egret中,后面为了简化,会省略包名,直接写成Shape来表示egret.Sahpe,其他类也一样;

    graphics是Shape对象的一个属性,用来绘制图形,绘制以beginFill()开始,以endFill()结束;用beginFill来填充颜色,所以要给其传个表示颜色值(和其他语言一样,十六进制组合表示,但要将 # 改成 0X)的参数;

    两个方法间还用到drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight)方法,若是画圆就是drawCircle(),此处drawRect()方法的参数是两对坐标,起始坐标和终止坐标,因为画的要覆盖屏幕,所以此处起始坐标为原点,终止坐标就是舞台的宽和高;

    绘制完后,还要将其添加到显示结构中,才可以在运行时显示出来,super.addChild(bg) ; addChild 是egret引擎常用的显示结构的的方法,就是将某个显示对象添加到显示容器中;(注意文档类实例添加到舞台是引擎默认完成的,不需要我们用代码实现),super的使用是因为addChild方法是该类的父类定义的,也可根据个人习惯写成this.addChild(bg);至此,背景的添加就完成了;

    但是可以看到,浏览器中并不是完全被占满整个屏幕;因为egret应用最广泛的是移动应用,通常使用的屏幕适配模式是整体显示,egret提供几种常规的适配模式,刚才那种就是整体显示的模式(不进行缩放),表示为showAll

    占满屏幕的是另一种,为fixedWidth,fixedWidth模式会保持原始宽高比缩放,缩放后应用程序内容会在水平和垂直方向都填满窗口,但只保持应用程序的宽度不变,高度可能发生改变,我们可以在index.html文件中进行修改适配模式,data-scale-mode = "showAll"  将showAll修改成 fixedWidth 即可;

    或者是在项目代码里面也可以进行修改:this.stage.scalemode=egret.StageScaleMode.FIXED_WIDTH;效果和在index.html文件里面修改的效果是一样的;

    修改了背景,接下来添加一些文字:

    和修改背景类似;声明对象,设置对象属性,添加对象;

    var tx:egret.TextField = new egret.TextField();

    tx.text = " I'm Lee,hello everybody, I'll study with you in the future";

    tx.size = 30;

    super.addChild(tx);

    可以发现,文字的显示格式有些乱,下面调整一下格式;

    加上这几句:

    tx.x = 20;
    tx.y = 20;
    tx.width = this.stage.stageWidth-40; 显示格式如下:

    注意前两行分别设置了文本对象的x和y值,是基于锚点设置,锚点默认位于显示对象的左上角;也可以根据需要设置锚点的位置;

    响应用户操作:

    对文字加上响应操作:

    tx.touchEvent = true;  //允许该显示对象响应touch事件,egret中所有的显示对象默认不响应touch事件,这是处于对性能的考虑;

    tx.addEventListener(egret.touchEvent.TOUCH_TAP , this.touchHandler , this); //事件处理函数

    然后在Main.ts文件中,还要声明touchHandler函数:

    private  touchHandler(evt : egret.TouchEvent):void{

      var tx:egret.TextField = evt . currentTarget();

      tx.textColor = 0x00ff00;

    }

    编译运行后,点击文字会变成绿色;

    此处的事件处理函数是用一个类方法实现的,还可以使用匿名函数实现:

    tx.addEventListener(egret.TouchEvent.TOUCH_TAP,function(evt : egret.TouchEvent):void{

        tx.textColor= 0x00ff00;

    },this);

    资源加载:

    egret中所有资源都是动态加载的;

    资源加载清单:

    Egret资源加载是以资源加载清单为基础的,资源好比是要购买的物品,资源加载配置就是购物清单;先把物品列在清单上,然后再去买物品;

    Egret中使用json格式作为RES资源加载配置文件的格式。这种格式使用方便,甚至可以在记事本上边写,javascript也支持json,便于解析;

    Egret中资源加载配置文件位于项目目录中的resource文件夹中,取名default.res.json。Egret项目在创建时已经包含该文件;

    注意:Egret版本2.5之前的版本中,该文件的名字为resource.json。

  • 相关阅读:
    程序员修炼之道阅读笔记1
    构建之法阅读笔记6
    构建之法阅读笔记5
    构建之法阅读笔记4
    构建之法阅读笔记3
    构建之法阅读笔记2
    关于搜狗输入法的评价
    找水王
    用户场景
    个人工作总结
  • 原文地址:https://www.cnblogs.com/RitaLee/p/6169401.html
Copyright © 2011-2022 走看看