Egret 学习之 入口函数 及开始编写程序(三)

时间:2023-01-10 19:38:51

1,Egret的程序入口:

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

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

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;

Egret 学习之 入口函数  及开始编写程序(三)

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

Egret 学习之 入口函数  及开始编写程序(三)

或者是在项目代码里面也可以进行修改: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);

Egret 学习之 入口函数  及开始编写程序(三)

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

加上这几句:

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

Egret 学习之 入口函数  及开始编写程序(三)

注意前两行分别设置了文本对象的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。