有可选参数的函数

函数有两个形参，假设第一个必传、第二个可传可不传

function add (n1: number,n2?:number):number{
}
add();   //报错,参数个数不匹配
add(1);  //正确
add(1,2);   //正确

有默认参数的函数

//当函数有可选参数时,我们必须检测参数是否被传递,我们还可以使用默认参数来解决参数不确定的情况
function add(n1: number, n2: number = 3): number{
    return n1 + n2
}
add() //报错
add(1)  // 4
add(1,2) //3

有剩余参数的函数

function add(...num:number[]): number{//number[]表示数组类型,数组里面为number
  var sum = 0;
  for(var i:number = 0;i<num.length;i++){
      sum + = num[i]
  }
  return sum;
}
add() //正确
add(1) //正确
add(2) //正确

认识类与对象

• 类是一种复杂的数据结构,他是将不同类型的数据和这些数据相关的操作封装在一起的集合体

• 对象是类的实例,是类描述的具体事物(类是对象的抽象化,对象是类的实体化)

  
  

属性：静态特性，例如姓名，年龄，身高
行为：动态行为，例如走路，跑步

• 创建一个狗的类

class Dog{
    name: string;
    age: number;
    sex: string;
    constructor(n: string,a: number,sex: string){
        this.name = n;
        this.age = a;
        this.sex = s;
    }
    run(){
         console.log(this.name + '在跑')
    }
}

• 创建Dog类的对象

var d1 = new Dog('旺财',3,'男');
//直接访问旺财的属性
console.log(d1.name) // '旺财'

• egret run -a 实时编译
• 可访问修饰符
  很多情况下，我们不希望一些属性在类外被访问到，我们可以借助属性访问修饰符：
  public 公有修饰符，可以在类外使用修饰的属性或行为
  protected 受保护的修饰符，可以在类（子类）内使用修饰的属性和行为
  private 私有修饰符，只可以在当前类使用修饰的属性和行为

注意：如果不用修饰符，默认为public修饰

• 只读属性修饰符
  使用readonly修饰符将属性设置为只读的，即只读的属性不可被修改，只读属性必须在声明时或者构造函数里被初始化。

class Person{
    public readonly name: string = '张三';
    constructor(){  
    }
}
var p1 = new Person;
p1.name = '李四' //报错

游戏基础知识

• 显示对象
  在egret渲染架构设计中，我们将能够参与渲染的对象抽象为显示对象。
  egret引擎中所有的显示对象类型表格

  
  
• 坐标系
  egret游戏中的坐标原点位于舞台的左上角
• 显示列表与容器类
  所有容器全部继承于DisplayObjectContainer类
  DiaplayObjectContainer类中封装了显示列表常用的功能:
  • 添加/删除 子对象
  • 访问子对象
  • 检测子对象
  • 设置叠放次序
    添加显示对象到显示列表:
    this.addChild(shape)
    删除显示对象:
    this.removeChild(shape)
• Shape矢量图和TextField文本类
  shape可以用来绘制一些简单图形，可是使用Graphic类中封装好的绘图方法
  TextField文本类可以用它来显示文本

//定义一个矢量图
var circle: egret.Shape = new egret.Shape();
//开始绘制图形，设置颜色
circle.graphic.beginFill(0x00FFFF);
//绘制图形
circle.graphic.drawCircle(200,200,200);
//结束绘制
circle.graphic.endFill();
//添加到显示列表中去
this.addChild(circle);

//定义个TextField文件对象
var msg: egret.TextField = new egret .TextField();
//添加到显示列表中去
this.addChild(msg);
//设置文本内容 
msg.text = '这是一段文本'

事件与用户交互

• egret引擎中提供了与js一样的事件处理系统,并且在此基础上还提供了一个事件处理对象，通过一整套的事件处理机制，可以方便的响应用户交互输入与系统事件。

public constructor() {
    super();      
 this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(event: event.Event){
    console.log('舞台加载完毕')
}

上面例子描述了当舞台被加载入场景时触发的事件机制，当程序侦听到有显示对象加入舞台后，创建·egret.event对象派发egret.Event.ADD_TO_STAGE事件，我们在类中定义了一个私有函数onAddToStage()，用于执行事件触发后的相关操作。

• 事件类：每个事件都有关联的事件类型

  • 事件类型以字符串的形式存储在Egret.Event.type属性中
  • 常见的事件对象，有如下：
    • 触摸事件 egret.TouchEvent
    • 声音事件 egret.SoundEvent
    • 定时事件 egret.TimeEvent
    • 文本事件 egret.TextEvent
    • 网络加载状态事件 egret.HTTPstatusEvent
    • I/O错误事件 egret.IOEvent

• 创建侦听器

  • 要想使一个对象侦听某个事件，首先使用addEventListener方法来注册事件侦听器
  • 事件接受对象.addEventListener(事件类.事件类型,事件处理函数,事件处理函数的this对象)
  • 事件的发送者必须是 egret.EventDispatcher 类或者子类的实例。只有事件发送者才能侦听事件，并且可以 注册侦听器。

//设置circle可被点击
circle.touchEnabled = true;
var num:number = 0;
//监听点击事件
circle.addEventListener(egret.TouchEvent.TOUCH_TAP,function(){
    //console.log('点了我'+num+'次')
    msg.text = num
},this)

//移除监听事件(及时回收内存)

circle.addEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this);
private touchHandler(e:egret.TouchEvent){
    var c: egret.Shape = <egret.Shape>e.target;
    console.log('被点击了');
// 要确保移除侦听器的对象，已经绑定了监听器，否则会报错
if(c.hasEventListener(egret.TouchEvent.TOUCH_TAP)){
        c.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this)
    }
//从舞台移除显示对象，要确定其已经在显示列表中，否则会报错
if(c.parent){
    this.removeChild(c)
    }
}

• 加载头像出来：
  • 拖动头像图片到资源preload里
  • 自己定义一个Bitmap来放到舞台上显示该头像

  //定义一个bitmap
  var portrait: egret.Bitmap = new egret.Bitmap();
  //加载图片效果
  portrait.texture = RES.getRes('yu_jpg');
  //添加到显示列表中
  this.addChild(portrait);
  

  • 设置图片的一些属性

  //设置头像宽高
  portrait.width = stageW/2;
  portrait.height = stageW/2;
  //设置锚点的方式来实现水平居中
  portrait.anchorOffsetX = portrait.width/2;
  portrait.anchorOffsetY = portrait.height/2;
  portrait.x = stageW/2;
  portrait.y = portrait.height / 2;
  

• 定义文本并添加内容

//定义文本
var text: egret.TextField = new egret.TextField();
//直接添加到显示列表中去
this.addChild(text);
//设置内容
    //es6字符串模板会保留格式
text.text = `《乡愁》 余光中

小时候,

乡愁是一枚小小的邮票`
//设置文本的宽度是屏幕（舞台）的宽度
 text.width = stageW;
//设置文本背景色
text.background = true;
text.backgroundColor = 0xe8fff5;

//设置文本的位置，距离头像底部10
text.y = portrait.height + 10;
//设置字体颜色
text.textColor = 0x199fc2;
//设置文本的高度（文本内容上下留10）
text.height = text.height + 20;
//设置文本居中（水平/垂直）
text.textAlign = egret.HorizontalAlign.CENTER;
text.verticalAlign = egret.VerticalAlign.MIDDLE;

//声明滚动视图
var scroll: egret.ScrollView = new egret.ScrollView();
//直接添加到显示列表中去
this.addChild(scroll);
//设置可滚动范围
scroll.width = stageW;
scroll.height = stageH;

• 设置滚动容器

//定义一个容器
var content: egret.Sprite = new egret.Sprite();
//设置容器可以滚动
scroll.setContent(content);
//需要滚动的部分都要添加到可滚动容器中去
content.addChild(portrait);
content.addChild(text);

• 添加缓动动画

var change = () => {
    //默认portrait的旋转角度为0
    portrait.rotation = 0;
    //使用Tween动画库实现，激活portrait
    egret.Tween.get(portrait).to({
          rotation : 360 
    //动画执行完执行call回调函数
    },5000).call(change,this)
}
//调用change函数
change();

• EUI高级制作

  • EUI是一套基于Egret核心显示列表的UI扩展库，它封装带大量的UI常用组件，可以实现快速的开发需要
  • 新建EUI项目

• 点击文字变色

//对文字加上响应操作：
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。

• 单例类
  一个类里只有一个对象（待考虑），单例 类不会被销毁，会一直存在内存中
  声明单例类：

class SceneManager extends egret.{
    //游戏开始场景的实例
    public gameBegin: GameBegin;
    //游戏中的场景实例
    public gamePlay: GamePlay;
    public constructor(){
        this.gameBegin = new GameBegin();
        this.gamePlay = new GamePlay();
        //默认显示开始场景
        // 只有容器才有addChild
        this
    }
    //static表示只能通过类来访问，不能通过类的实例和对象来访问
    private static shared: SceneManager;
    public static Shared(): ScenceManager{
        if(SceneManager.shared == null){
            SceneManager.shared = new SceneManager();
        }
        return SceneManager.shared
    }
}

• ts编译成js：

//ts
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

//js
let Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

let greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

• 在GameBegin.ts中拿到GameBegin.exml中的按钮，在exml中给按钮设置id（属性面板 - 通常 - ID）
  在GameBegin.ts中定义begin_btn;

public begin_btn:eui.button;

• 所有的容器全部继承自 DisplayObjectContainer 类，这个名称为 DisplayObjectContainer 的类又继承自 DisplayObject 。在Egret中， DisplayObjectContainer 封装了一些显示列表中常用的功能。这些常用操作主要分为四类：

  添加、删除子对象 
  访问子对象 
  检测子对象 
  设置叠放次序 
  

• egret中的addChild顺序不一样结果也不一样，在一个页面中添加两个tabbar因为顺序颠倒导致其中一个监听不了事件。