初学egret要点总结

简介

学习了大概一天的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);

还有更多内容需要继续摸索~

你可能感兴趣的:(egret)