LayaAir学习小记

本周开始接触了一个新的游戏引擎：LayaAir，这周主要熟悉了LayaAir（typescript作开发语言）的一些基本用法，整理部分笔记如下：

1.环境搭建：从官网上下载LayaAir IDE即可使用，对于选择的开发语言，需要使用npm进行安装。

2.绘制几何图形：简单分为三步：

    (1)创建laya.display.Sprite类型;

    (2)调用类型的绘图API;

    (3)添加到Laya的窗口。

    例如在窗口上绘制一个圆的最简单代码如下：

let sp=new laya.display.Sprite(); // 1
sp.graphics.drawCircle(100,100,50,"#ff0000"); // 2
Laya.stage.addChild(sp); // 3

3.绘制文本：大致同2，创建Laya.Text类型并设置文本的一些属性：

let t=new Laya.Text();
t.text="Hello Layabox";
t.color="#ffff00";
Laya.stage.addChild(t);

 其他可设置的属性包括x,y,fontSize,stroke,strokeColor等。

4.绘制图片：有多种方法，本人使用的是laya.display.Sprite类型的loadImage接口，使用此方法时，需要把要加载的图片放入项目的laya/asset文件夹中，然后在IDE的设计模式中设置默认属性为“不打包”，然后按F12发布，然后项目的bin文件夹就会生成图片，把该图片的路径传入loadImage函数中，设置大小等信息，即可绘制图片。在实际的开发中，应把所有的图片打包成图集，然后加载图集中的图片。

5.发送和监听事件：使用Laya.EventDispatcher类型。使用时，创建一个Laya.EventDispatcher的类型，调用其event接口和on接口，可以创建一个Laya.EventDispatcher的单例来负责游戏对象之间的通信。

//监听事件
let ev=new Laya.EventDispatcher();
ev.on("print",this,this.handlePrint);

//发送事件
ev.event("print",[1,2]);

//事件处理函数
handlePrint(x,y){
    console.log(x+" "+y);
}

6.输入处理：

    （1）编写事件处理函数；

    （2）绑定输入事件与事件处理函数。

//绑定
Laya.stage.on("keydown",this,this.keyDown);
Laya.stage.on("mousemove",this,this.mouseMove);

//事件处理函数
keyDown(e){
    switch(e.keyCode){
        case Laya.Keyboard.A:console.log("A down");break;
        case Laya.Keyboard.B:console.log("B down");break;
        //...
    }
}     
mouseMove(){
    console.log("Mouse X:"+Laya.stage.mouseX);
}

7.以帧为单位的游戏循环和延迟事件：通过Laya.timer.frameLoop来实现游戏循环以及Laya.timer.frameOnce来实现延迟事件，有一点要注意的是其caller参数要设置正确，如果调用者指定不正确，则可能会导致函数中的this指代不明确而发生错误。

//绑定游戏循环事件和延迟事件
Laya.timer.frameLoop(1,this,this.loop);
Laya.timer.frameOnce(100,this,this.loopEnd);

//事件函数的实现
loop(){
    console.log("loop...");
}

loopEnd(){
    console.log("loop end.");
    Laya.timer.clear(this,this.loop);
}

除了Laya.timer.frameLoop与Laya.timer.frameOnce外，本人还发现Laya.stage.frameLoop与Laya.stage.frameOnce也能实现同样的功能，但是不能通过Laya.timer.clear来清除，暂时没发现其区别是什么。此外也有以具体时间为单位的Laya.timer.loop和Laya.timer.callLater。

8.let关键字和var关键字：它们都用于声明一个变量，主要的区别是作用域的不同，var关键字的作用域为整个函数，而let关键字仅在当前所在的闭包有效。一般而言，尽量使用let关键字。

fun1(){
    for(let i=0;i<10;++i){
        for(var j=0;j<10;++j){
            console.log(i+" "+j); 
        }
    }
    console.log(i);//报错：Cannot find name "i".
    console.log(j);
}

fun2(){
    console.log(j);//报错：Cannot find name "j".
}

9.LayaAir IDE:

    (1)Shift+Alt+F：自动对齐；

    (2)编辑模式：可以进行图集的生成，编辑UI界面等等，现在还不太熟悉。

 

   对LayaAir的初步认识：虽然接触LayaAir只有一个星期，但我感觉这个游戏引擎还是相当不错的，首先它上手还是非常容易的，基本上有一点计算机基础的都能很快学会它，另外就是这个引擎的API也做得不错，注释写得都很到位，而且IDE里面甚至集成了一些示例Demo，可以说是非常新手友好了。而至于这个引擎被提到的高性能、支持多平台发布等优点，暂时还感觉不到...这个引擎有时候会报一些奇怪的bug，而且IDE的调试工具好像也有点问题，debug起来没有VS用的舒服。而且在IDE加载图片还要搞什么打包图集之类的操作，多多少少还是有些麻烦。不过嘛，LayaAir这个引擎好像还很“年轻”，对于这个引擎以后的发展还是可以期待期待的 。