Egret Launcher 引擎入门教学笔记（二）

一.Typescript的基本语法

1 .流程控程

•  计算机执行程序的时候,是按照从上到下，从左到右,逐行进行

我们常见的流程:

• 顺序

• 分支

• 循环

• 分支结构

• 单分支

• 语法结构

                          if(表达式){
代码块

                          }

• 执行逻辑: 当程序遇到if结构, 首先判断表达式的值，如果表达式的值为真,则执行大括号里面的代码块，如果表达式的值为假，则直接跳过if结构(不执行大括号里面的代码块.)

  var a = 3;
  if(a > 2){
  console. log(a);
  }

•  二分支

  语法结构
  if(表达式){
    代码块1
   }else{ 
    代码块2
  }
  

执行逻辑:当程序遇到if-else结构时,首先计算表达式的值，如果表达式的值为真,则执行代码块如果表达式的值为假，则执行代码块2.

• 多分支

  语法结构 1f(表达式1){ 代码块1 }else if(表达式2){ 代码块2 } else 1f(表达式3){ 代码块3 }

执行逻辑:当程序遇到if-else if结构时,
首先会计算表达式1的值 ,如果表达式1为真,则执行代码块1,如果表达式1为假,继续判断表达式2的值

如果表达2的值为真 ,则执行代码块2,如果表达式2的值为假,则继续判断表达式3的值，

 如果表达3的值为真, 则执行代码块3 , 如果表达式3的值为假.

var a = 60;
 if(a>80){
 console.1og('优秀');
} if(a>60){ console.1og('良好');
} else{ console.1og('不及格');
}

• switch-case语句

  语法结构
  switch(val值){
  case val. 1:代码块1; break; case val_ 2:代码块2;
  break;
  case val_ 3:代码块3; break; }

执行逻辑:
如果val值等于val_ 1, 则执行代码块1 ,如果val值等于val_ 2, 则执行代码块2,如果val值等于val_ 3,则执行代码块3;

• 循环结构

• while语句

  语法结构
  while(条件表达式){ //循环语句 };

执行逻辑:
首先判断条件表达式,如果条件表达式为真,则机型循环语句，之后继续判断条件表达式,直到为假才停止。

var a = 0;
while(a > 10){
    console.log(a);
}

• do-while 语句

  语法结构 do{ //循环语句 }while(条件表达式/循环条件)

 while和d0-while的区别

• while循环 先判断,后执行

• do-while循环先执行,后判断

• do-while至少执行一 次循环语句,而while不一定

• for语句

  语法结构 for(表达式1;表达式2;表达式3){ // 循环语句 } 执行逻辑: ->首先执行表达式1 ->判断表达式2,如果值为真,则执行循环语句,如果值为假，跳出循环 ->执行循环语句之后,再执行表达式3 ->回到第二步,继续判断表达式2

• 跳出循环

• break直接跳出当前循环.

• continue 直接跳过本次循环(continue关键字以下的循环语句不再执行),继续下次循环.

•  continue 直接跳过本次循环(continue关键字以下的循环语句不再执行)，继续下次循环.

  for(var a: number = 0;a < 10;a++){
       if(a==5){    break;
  }     console. log(a); 
  }
  

（注：上面写的是ts 如果是想在浏览器控制台运行，把 “：number” 去掉就可以了）

• 定义函数

  语法function add(n1: number ,n2: number) : number{ return n1 + n2; }注意:return关键字有两个作用: 作为结果的返回关键字. 结束当前函数. (return关键字之后的代码,不再执行.)

• 调用函数

  add(3,5);

• 注意:

• 声明(定义)函数必须使用function关键字

• 函数名和变量名-样,命名规则按照标识符的规则.

• 声明函数的时候参数可有可无，多个参数之间用逗号隔开

• 函数的返回值可有可无，没有没有手动设置,则返回值类型为void;

• 大括号内为函数体.

• 函数的参数

• 形参(函数定义的时候写的参数就是形参).从字面意思可以看出,形参就是形式，上的参数.

•  实参(调用函数的时候,传递的具体值就是实参).从字面意思可以看出，实参就是实际上的具体值. 

• 形参和实参

• 在函数调用的时候，我们需要按照形参的规则传递实参,有几个形参就要传递几个实参，并且每一个实参的数据类型都要与对应的形参数据类型一致.

• 有可选参数的函数 

   //函数有两个形参,假设第一 个必传，第二个可传可不传
      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{ var sum = 0; for(var i: number = 0;i<num. length;i++){ sum += num[i]; } return sum; }

  //调用 add();//正确 add(1);// 正确 add(1,2);// 正确

• 函数的定义方法

• 函数声明法

  function add(n1: number,n2: number): number{ return n1 + n2; }

•  函数的表达式法

  var add = function(n1: number, n2: number): number{ return n1 + n2; }

• 箭头函数 

  var add = (n1: number, n2: number):number => { return n1 + n2; }

二.面向对象编程

举例解释一下 面向对象

什么是面向对象？面向对象就是像你不想洗衣服的时候，把衣服给洗衣店之后你就不用管了，不理了你的衣服是用手洗的，还是用洗衣机洗，还是用脚洗的，这个你都不用管了，然后就等待干净的衣服就好了，这个过程就是面向对象。用机器术语来说，你只需要发出指令然后等待结果就好，这个就是面向对象的过程。

1. 认识类与对象

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

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

类                                                                  对象
电脑                                                               苹果电脑,联想电脑,戴尔

人名                                                               张三，李四，王五，

• 属性:静态特性,例如姓名,年龄,身高...
• 行为:动态行为,例如走路,跑步,唱歌...

2.创建类

例

• 我们创建一个小狗类

  //我们使用class这个关键字来定义一个类 //类名的首字母一般大写 class 类名{ constructor(){

  }
  

  } //doc类 class Dog { name: string; age: number; sex: string; constructor(n: string, a: number, s: string) { this.name = n; this.age = a; this.sex = s; } //小狗跑的方法 run() { console.log(this.name + " 在跑步..") } }

创建Dod类的对象  

var d1 = new Dog ('来福',2,'公');
//直接访问“来福”的属性
console.log("名字叫：" + d1.name + "，今年" + d1.age + "岁了，" + "是" + d1.sex + "的")
//输出  名字叫：来福今年2岁了是公的

//调用对象的方法
d1.run()

下面我们来试试

打开我们建hello项目

打开后找到 src 找到 Main.ts 文件 找到 createGameScene() 这个函数 把里面内容删除像下面这个样

我们把类 dog类 放到 最外面

在 createGameScene(){ } 写我们的 小狗 进来 如下图（如果代码排得乱时可以右键选择 设置文档格式 这样可以提高代码的观赏性）

我们可用命令来运行 如下图 也可以点 爬虫 下 播放 键

然后在浏览器 右键就可以看到下图 再点 consloe

3.访问修饰符

•  很多情况下我们不希望-些属性在 类外被访问到,我们可以借助属性访问修饰符:public protected private; 

注：如果不合适用修饰符，默认用public修饰

4.只读属性修饰符

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

class Person{
    public readonly name: string = '张三三';
    constructor(){
    }
  
}
var p1 = new Person();
p1.name = '张三';//报错 因为修改符是只读 不能修改

注：要理解 类与对象 很重要

三.项目文件结构分析

•  首先节目的核心文件位置,src文件夹

• src即source code的缩写,所有项目的源代码都放在这个目录下,这个目录下有我们最重要的文件.

• Main.ts为项目入口类,也称文档类, 是衔接项目运行容器环境和项目中所有类的重要文件.

• LoadingUl.ts,是 加载过程中的辅助显示组件,用来显示加载进度.

• 项目配置文件

•  项目根目录下的egretProperties.json ，modules 下的是扩展库

项目运行库

libs目录下包含项目各模块所对应的所有类

• 项目编译目录

•  项目编译的结果文件都会被存储到bin-debug目录下,这也是调试过程中将会调用的文件.

• ts是js的超集，要在浏览器上运行所以必定要ts转换js,这个过程在项目会自己运行转换

 

•  项目资源目录

• resource目 录是用来存放项目运行所需要的所有资源,包括图片配置文件,音视频等等. 

• 这个文件有两个形态有代码形态和UI形态

例 我们来试试画圆和画个矩形（先不要在意代码是怎么实现的可以先看个大概）

在  private createGameScene() {} 下 如图

  private createGameScene() {
        //定义一个矢量图
        var circle:egret.Shape = new egret.Shape();
        //开始绘制图形，并设置填充颜色
        //beginFill 这个方法有两人个参数 一个是以 0x 开头接 颜色代码 和一个可以先参数 透明度的选择
        //  circle.graphics.beginFill(0xff4400,0.8);
        circle.graphics.beginFill(0xff4400);
        //绘制圆形
        circle.graphics.drawCircle(200,200,200);
        //结束绘制
        circle.graphics.endFill;
        //添加到舞台
        this.addChild(circle);

    }

结果

这个小案例只是让你看看个绘制的大概

四.游戏的基础知识

1.显示对象

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

（上面表格是egret的基础绘制）

2.坐标系

• egret游戏中的坐标原点位于舞台的左上角

3.显示列表与容器类 

• 所有的容器全部继承于DisplayObjectContainer类 
• DisplayObjectContainer类中封装 了显示列表常用的功能 。添加/删除子对象。访问子对象。检测子对象 。设置叠放次序 
• 添加显示对象到显示列表 。this.addChild(shape);
• 删除显示对象 。this.removeChild(shape);

 4.Shape矢量图

• shape可以用来绘制一-些简单图形可是使用Graphics类中封装好的绘图方法.

  //定义一个矢量图 var circle:egret.Shape = new egret.Shape(); //开始绘制图形，并设置填充颜色 //beginFill 这个方法有两人个参数 一个是以 0x 开头接 颜色代码 和一个可以先参数 透明度的选择 // circle.graphics.beginFill(0xff4400,0.8); circle.graphics.beginFill(0xff4400); //绘制圆形 circle.graphics.drawCircle(200,200,200); //结束绘制 circle.graphics.endFill; //添加到舞台 this.addChild(circle);

5.TextField

• 文本类用显示文字文段

  //定义个TextField文件对象 var txt:egret.TextField = new egret.TextField(); //文本内容 txt.text = '《灌篮高手》' //设置文本显示的位置 x轴和y轴 txt.y = 100; txt.x = 100; //添加到显示列表中去 this.addChild(txt);

 五.事件与用户交互

1.事件消息机制

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

• 事件处理的例子

  public constructor() {
      super();
      this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
  }
  
  private onAddToStage(event: egret.Event) {
  
  }
  

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

2.事件类

• 事件类是承载事件信息以及一些事件处理方法的对象.每个事件都有关联的事件类型.

• 事件类型以字符串的形式储在Egret.Event.type属性中

• 常见的事件对象，有如下：

• 触摸事件 egret.TouchEvent

• 声音事件 egret.SoundEvent

• 定时事件 egret.TimeEvent

• 文本事件 egret.TextEvent

• 网络加载状态事件 egret.HTTPStatusEvent

• I/O错误事件 egret.IOEvent 等等

3.创建侦听器

• 要想使用一个对象侦听某个事件，首先使用addEventListener方法来注册事件侦听器.

  事件接受对象. addEventListener(事件类.事件类型,事件处理函数,事件处理函数的this对象); function事件处理函数(事件实例:事件类){ //响应函数中的代码
  }

       （createGameScene()这个方法下写）
      //给circle绑定点击侦听事件
      //注意要打开circle可以点击 因为来默认是不允许点击的 所以要手动打开
      circle.touchEnabled = true;
  
      //可以记录一下被点了多少次
      var num: number = 0;
  
      circle.addEventListener(egret.TouchEvent.TOUCH_TAP,function(){
          console.log('我被点击了');
         
      },this);
  

结果

         //可以记录一下被点了多少次
        var num: number = 0;
        circle.addEventListener(egret.TouchEvent.TOUCH_TAP,function(){
            console.log('我被点击了');
            //让circle 点的次数num加1
            num++;
            //显示点击的次数
            txt.text = '被点了多少'+ num.toString()+'次';
        },this);

结果

4.移除侦听器

删除不再使用的侦听器

事件接受对象. removeEventListener(事件类.事件类型,事件处理函数,事件处理函数的this对象);
function事件处理函数(事件实例:事件类){
    //响应函数中的代码    
}

     private createGameScene() {    
      //...接上之前的代码
     //演示移除绑定 
        circle.addEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this)

    }
    //移除绑定了所以只可以点击一次 因为点击事件被移除了
    private touchHandler(e: egret.TouchEvent){
        var c: egret.Shape = e.target;
        console.log('圆被点击了')
        
        c.removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this)
    }

•  注意,一定要确保移除侦听器的对象,已经绑定了侦听器.

  if(c.hasEventListener(egret.TouchEvent.TOUCH_TAP)){ c. removeEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this); }

• 移除显示对象也需要确定其已经在显示列表中 

做个一点击就移除

        //演示移除绑定 
        circle.addEventListener(egret.TouchEvent.TOUCH_TAP,this.touchHandler,this)

    }
    //移除绑定了所以只可以点击一次 因为点击事件被移除了
    private touchHandler(e: egret.TouchEvent){
        var c: 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)
            c.parent.removeChild(c)
        }
    }

结果