laya引擎学习（二、第一个界面）

接下来我们做做我们的第一个界面，启动界面。其实感觉做前端比较难的就是素材，如果在公司的话，有UI小姐姐做好了，我们只需要自己实现就行，现在是自己玩的话，还是上网找素材，不过感谢这个大佬，素材是免费的，衷心感谢。

2.第一个界面

2.1 素材准备

上篇文章忘记写了，不过留在这一篇也可以，现在正是式解一下怎么使用组件化编程。

首先，先把素材添加到组件中，在Assets右击，选择打开所在目录，就是我们这个项目存放素材的目录。

assets就是对应我们IDE界面的assets，pages对应我们的场景，都可以打开看看就明白了。

assets里面有comp目录，里面存放的就是laya官方的素材，我们可以把素材丢到这里，但是比较优雅的方式就是新建一个目录，然后把这个项目相关的素材放进来，这样最好。

回来看IDE界面，

点开就可以看到里面的素材，

这就是我们打地鼠的素材，讲了这么多都没说我们要做的第一个游戏就是打地鼠。

2.2 第一个页面

上一节我们把素材都准备好，这一节就使用素材了，怎么使用素材呢。其实很简单，就是把素材的元素拖到场景中，然后再设置对应的属性，我们来看看图：

图中，背景为黑色的就是我们之前创建的场景，然后我把素材拖进去，然后组织起来，这就是我们的菜单页面，这里要说一下：

**laya引擎可以通过改变自定义组件的名字前缀，就可以识别为具体的组件，比如，修改在前缀bg_，laya就会自动识别为背景，如果没按固定名字的话，就同一识别为sprite,**我们这些素材没有改名，所以就直接识别为sprite，不过我们可以转换类型，在左边的层级栏：

上面就是我们各个组件，可以选择拖到场景的页面中，下面就是层级，层级描述中我们现在这个场景中，里面的组件。我们把4个sprite转化成image。然后我们可以把这4个组件，组合成一起，形成一个menu的容器，这样做完之后，就能看到我途中的效果了。当然下面的help又是一个容器，这个等下再说，也比较简单。

2.3 编译运行

然后编译，运行，现在的编译运行，只是让我们高兴高兴，比较小目标已经达成，第一个界面就是这样简单。

是不是就可以在浏览器中看到的几个图片，当然如果，需要调整图片的大小，旋转，透明度等属性，可以选择组件后，在右边的栏目中操作，不过我一遍都是在代码中操作，不过结果都一样的，还有图片这种，就用默认的即可。

都是中文，都比较看的懂。

2.4 组件化编程

上面我们写的就是放几张图片在上面的静态网页，所以现在我们的目标，是让网页懂起来，让几个图片，能实现我鼠标点击，会缩小，然后鼠标放开，图片会放大的效果，就是检测鼠标事件。

怎么动起来，当然要写代码了，用代码实现绑定鼠标事件，然后动起来。

那怎么实现呢？这就是laya的组件化编程了，就是我们创建的脚本程序，是需要绑定成组件上的，有laya引擎，统一调度。不过这一篇，不打算介绍这个，下一篇介绍，这一篇还是主要介绍操作。

2.4.1 runtime

官方文档是有介绍这种方法的：runTime的使用

我这里简单介绍一下，runtime是直接继承页面，场景或组件类的，就比如我现在的组件是image，可以直接创建一个runtime类，来继承image，然后我这个类就可以调用image的属性和方法，这样操作是不是很简单。

文档的操作步骤，大家去看看，我这里就讲解一下代码：

/*
  ImageRunTime逻辑类 
*/
export default class ImageRunTime extends Laya.Image {
public scaleTime:number = 100;
constructor() {
  super();
  //设置组件的中心点
  this.anchorX = this.anchorY = 0.5;
  //添加鼠标按下事件侦听。按时时缩小按钮。
  this.on(Laya.Event.MOUSE_DOWN,this,this.scaleSmall);
  //添加鼠标抬起事件侦听。抬起时还原按钮。
  this.on(Laya.Event.MOUSE_UP,this, this.scaleBig);
  //添加鼠标离开事件侦听。离开时还原按钮。
  this.on(Laya.Event.MOUSE_OUT,this, this.scaleBig);
}
private scaleBig():void
{
    //变大还原的缓动效果
    Laya.Tween.to(this, {scaleX:1,scaleY:1},this.scaleTime);
}
private scaleSmall():void
{
   //缩小至0.8的缓动效果
   Laya.Tween.to(this,{scaleX:0.8,scaleY:0.8},this.scaleTime);
}
}

这是从官网拷贝出来的，好像注释的挺清晰，然后不用我解释了，就这样。如果有多个组件都需要这个功能，就把这个脚本设置进runtime中。然后都直接支持这个功能，这个是runtime的优点，像是一个接口的方式把，直接了这个接口，就支持这个功能，不好的地方就是回调的时候this太难处理了，这个下一节介绍。

最后，这个脚本需要自己创建，不知道能不能通过IDE创建，实现了，要手动绑定到组件的runtime中，即可完成。

2.4.2 script

这个才是我们讲的重点，script编程，script脚本也是需要绑定在组件上的，创建的脚本的话，需要借助IDE，

可以在scripts中点击右键，有新建目录，有新建脚本文件，就是这样创建的，可以使用目录来管理脚本文件比较合适，我这里就创建一个menu.js来管理这个菜单栏，虽然可以单独对一个image创建一个脚本，不过这个类的粒度太细了，我还是喜欢创建一个页面的类，比如这个，菜单类。

创建完成之后，脚本会自动添加一下代码：

export default class start extends Laya.Script {

    constructor() { 
        super(); 
        /** @prop {name:intType, tips:"整数类型示例", type:Int, default:1000}*/
        let intType = 1000;
        /** @prop {name:numType, tips:"数字类型示例", type:Number, default:1000}*/
        let numType = 1000;
        /** @prop {name:strType, tips:"字符串类型示例", type:String, default:"hello laya"}*/
        let strType = "hello laya";
        /** @prop {name:boolType, tips:"布尔类型示例", type:Bool, default:true}*/
        let boolType = true;
        // 更多参数说明请访问: https://ldc2.layabox.com/doc/?nav=zh-as-2-4-0
    }
    
    onEnable() {
    }

    onDisable() {
    }
}

代码怎么意思，onEnable一看就是回调了，不过我们也下一节课讲。

接下来就需要实现点击事件逻辑了，其实这种方法和上面的不同之处就在于，这个脚本继承了Laya.Script，所以不能直接用this操作，需要通过方法来获取当前的组件对象：

onStart() {
        //只执行一次
        var menu = this.owner;
        //以后可以搞一个配置表
        console.log("onStart menu");

        for( var i=0; i<menu.numChildren; i++ ) {
            var button = menu.getChildAt(i);    
            this.onbind(button, this.menuCallback[i]);
        }
    }

是不是看到了，通过this.owner.getChildAt来获取组件，然后再单独对每个button进行绑定，看看绑定代码，就很熟悉了：

onbind(button, callback) {
        button.scaleTime = 100;
        //设置组件的中心点
        button.anchorX = button.anchorY = 0.5;
        //添加鼠标按下事件侦听。按时时缩小按钮。
        button.on(Laya.Event.MOUSE_DOWN,button,this.scaleSmall);
        //添加鼠标抬起事件侦听。抬起时还原按钮。
        button.on(Laya.Event.MOUSE_UP,button, this.scaleBig);
        //添加鼠标离开事件侦听。离开时还原按钮。
        //button.on(Laya.Event.MOUSE_OUT,button, this.scaleBig);
        button.callback = callback;
    }

    scaleBig() {        
        //变大还原的缓动效果
        Laya.Tween.to(this,{scaleX:1,scaleY:1},this.scaleTime);
        this.callback.call(this.parent.parent);
    }
    scaleSmall()  {    
        //缩小至0.8的缓动效果
        Laya.Tween.to(this,{scaleX:0.8,scaleY:0.8},this.scaleTime);
    }

是不是就是上面的runtime的逻辑，所以说这两种脚本的继承不一样，导致怎么获取组件的方法不一样而已，其实逻辑实现的方式还是一样的。

2.5 最后

赶紧编译运行起来看看吧，试试按键在鼠标下缩小放大的感觉吧。

如果有哪里写的不对的地方，可以联系我，大家一起进步，下一节安排一下，组件，脚本的生命周期，我们大家都了解一下laya对组件的管理周期和组件树。