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。