简介
学习了大概一天的egret,今天先把看了的知识点大致总结下,写的不好的地方还请勿喷[捂脸]
正文
安装
文档内的安装教程还是写的蛮清楚的,我就不详细写了。首先要安装的是引擎库管理工具(egret launcher)。这个用来安装引擎,创建项目用。然后要装编辑器,这个在egret launcher里面有个列表,随便装个就行。我装的是wing。在新建项目时去,可以勾选项目类型,选项不同生成的代码也有一定区别,选择的引擎版本不同也会有影响,这个需要注意。
工具自动生成的项目可以直接运行的,我们写的代码主要存放在src文件夹下。要运行先点击编辑器顶部的项目->构建,然后再项目->运行。入口函数
生成的项目默认入口函数为main.ts,这个可以通过改动index.html里面data-entry-class="Main"属性改变。
main类有下面这个方法:public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);}
在类一创建时执行上面这段,然后监听将显示对象添加到舞台时的事件,所以后面的代码都可以通过onAddToStage函数继续。
绘制图形对象
let bg=new egret.Shape(); //新建图形对象bg.graphics.beginFill(0x336699); //填充颜色bg.graphics.drawRect(0,0,this.stage.stageWidth,this.stage.stageHeight); //画矩形,大小和场景一样bg.graphics.endFill(); //结束绘制this.addChild(bg); //将元素添加到舞台
这个有点类似于canvas。
文本
let tx=new egret.TextField(); //新建文本对象 tx.text="hello world"; //文字 tx.x=300; //偏移量X tx.y=300; //偏移量Y this.addChild(tx);
绑定事件
tx.touchEnabled = true; //先将元素设置为可点击的tx.addEventListener( egret.TouchEvent.TOUCH_TAP, this.touchHandler, this ); //绑定事件
egret中,出于性能考虑,默认所有显示对象都不响应touch事件,所有要先设置为可点击的。
加载资源
自动生成的代码中,createBitmapByName方法可以留着,它能帮助快速引入本地图片资源。
let apple=this.createBitmapByName('apple_jpg'); //加载位图 apple.width=150; //图片宽高 apple.height=150; this.addChild(apple); //添加到场景 console.log(this.getChildIndex(apple)) //获取显示深度 this.setChildIndex(apple,2) //设置显示深度
Tween动画
apple.anchorOffsetX = 30; //相对于对象本身的锚点值,可写在点击事件内,进行偏移apple.anchorOffsetY = 40;
声音资源
var sound:egret.Sound = RES.getRes( "bonus.mp3" ); //var channel:egret.SoundChannel = sound.play(0,1);
还有更多内容需要继续摸索~