Laya2.0初探1——水管鸟案例

前言

本文初探LayaAir2.0引擎，记录学习历程

其实学习Laya引擎是很早之前定下的目标。但有一些事情耽搁了就晚了一些时间。这两天初窥门径，当然期间也踩过不少的坑。我的想法是先从Laya的2D游戏下手，老项目——先使用Laya完成水管鸟实操再说。

---

1：循环滚动的背景图

在CocosCreator的学习日志里，我也写过这个功能，但在creator中我是在update中直接缩减节点的x来实现节点向左移动的效果，在Laya中我使用的是刚体通过设置linearVelocity来设置刚体的线性速度来控制移动。

首先创建两个相同的背景，并设置好宽度、高度，以及位置，然后为两个节点都添加好碰撞组件(添加碰撞组件时会自动添加上刚体组件)

接下来在工程面板中的Scripts文件夹下新建BgMove.js文件，并将他拖到Scene上面

/**
*
* @ author:QQ
* @ email:1506978348@qq.com
* @ data: 2020-10-15 20:10
*/
export default class BgMove extends Laya.Script {

    constructor() {
        super();
        /** @prop {name:moveSpeed,tips:"提示文本",type:Number,default:null}*/
        this.moveSpeed=5;
    }

    onAwake(){//组件激活执行<onLoad>
        this.bg1 = this.owner.getChildByName("bg1");
        this.bg1.getComponent(Laya.RigidBody).linearVelocity = {x:-this.moveSpeed,y:0};
        this.bg2 = this.owner.getChildByName("bg2");
        this.bg2.getComponent(Laya.RigidBody).linearVelocity = {x:-this.moveSpeed,y:0};
        // this.ground1 = this.owner.getChildByName("ground1");
        // this.ground1.getComponent(Laya.RigidBody).linearVelocity = {x:-this.moveSpeed,y:0};
        // this.ground2 = this.owner.getChildByName("ground2");
        // this.ground2.getComponent(Laya.RigidBody).linearVelocity = {x:-this.moveSpeed,y:0};
    }
    onUpdate(){//每帧执行
        if(this.bg1.x<=-this.bg1.width){
            this.bg1.x += this.bg1.width*2;
        }
        if(this.bg2.x<=-this.bg2.width){
            this.bg2.x += this.bg2.width*2;
        }
        // if(this.ground1.x<=-this.ground1.width){
        //     this.ground1.x += this.ground1.width*2;
        // }
        // if(this.ground2.x<=-this.ground2.width){
        //     this.ground2.x += this.ground2.width*2;
        // }
        
    }
}

接下来，可以点击LayaIDE中的运行按钮在Chrome中运行(若报错提示如下图)

修改方式：打开VsCode，将工程中的.vscode文件夹下的launch.json文件打开并修改其中“runtimeExecutable”的参数为Chrome浏览器安装路径(默认状态为已注释)；

接下来，你就可以在Chrome浏览器中调试了，打开Chrome浏览器，你会发现你的背景已经开始动起来了

2：添加飞机动画并点击控制飞机的上下移动

在Laya里面的动画编辑器和cocos里面的完全不同，所以我目前也只是了解了一个大概，能用就行

在层级管理器下的Scene中新建一个Animation组件

将需要的动画素材按顺序全选(按住Ctrl键，鼠标左键选中需要的素材)，然后将他们拖到动画组件中的source中，接着将autoPlay设置为true

为小飞机添加碰撞组件，并修改BoxCollider的宽高使其将小飞机主体包围住。

接着新建点击控制飞机上移的脚本，然后挂载在飞机动画上

/**
*
* @ author:小学僧
* @ email:1506978348@qq.com
* @ data: 2020-10-20 20:12
*/

export default class planeFly extends Laya.Script {

    constructor() {
        super();
        /** @prop {name:name,tips:"提示文本",type:Node,default:null}*/
        this.xx=null;
    }

    onAwake(){
        Laya.stage.on(Laya.Event.CLICK,this,this.click);
    }
    click(){
        this.owner.getComponent(Laya.RigidBody).linearVelocity = {x:0,y:-10};
        
    }
}

然后在Chrome浏览器中运行，就可以使用鼠标的点击来控制飞机的向上移动了。

3：添加飞机的碰撞脚本

在实际的游戏中，飞机碰到地面，碰到山是会造成游戏结束的，所以这里需要为飞机添加碰撞检测的脚本

首先添加一个防止飞机向上飞出屏幕的碰撞体并设置它的RigidBody类型为Static(静态)，接着在飞机移动的脚本中添加碰撞检测的代码

/**
*
* @ author:小学僧
* @ email:1506978348@qq.com
* @ data: 2020-10-20 20:12
*/
let gameOver = false;
export default class planeFly extends Laya.Script {

    constructor() {
        super();
        /** @prop {name:name,tips:"提示文本",type:Node,default:null}*/
        this.xx=null;
    }

    onAwake(){
        Laya.stage.on(Laya.Event.CLICK,this,this.click);
    }
    click(){
        if(gameOver)return;
        this.owner.getComponent(Laya.RigidBody).linearVelocity = {x:0,y:-10};
        
    }
    onTriggerEnter(other){
        if(other.owner.name == 'sky'){
            return;
        }
        this.owner.loop = false;
        gameOver = true;
        Laya.stage.event("gameOver");//注册事件
    }
}

由于当飞机碰到山体游戏结束后，场景就不再移动，那么需要在Scene上面挂载的脚本进行注册事件的判断，在该脚本中onAwake方法中简单判断注册事件然后给背景刚体的线性速度设置为0即可。

Laya.stage.on("gameOver", this, function () {
            this.bg1.getComponent(Laya.RigidBody).linearVelocity = { x: 0, y: 0 };
            this.bg2.getComponent(Laya.RigidBody).linearVelocity = { x: 0, y: 0 };
            this.ground1.getComponent(Laya.RigidBody).linearVelocity = { x: 0, y: 0 };
            this.ground2.getComponent(Laya.RigidBody).linearVelocity = { x: 0, y: 0 };
        });

4：制作山体预制体

游戏中我们的山体都是通过一个山体来进行动态生成的。因此需要制作一个山体预制体来不断实例化

为山体节点添加碰撞组件，然后修改碰撞组件的范围，使其包裹住山体，并将其刚体类型设置为kinematic。接着因为山体要向左移动，所以需要新建一个脚本挂载在山体上来控制其移动

/**
*
* @ author:小学僧
* @ email:1506978348@qq.com
* @ data: 2020-10-23 19:50
*/
export default class wallMove extends Laya.Script {

    constructor() {
        super()
    }

    onAwake(){
        this.owner.getComponent(Laya.RigidBody).linearVelocity = {x:-5,y:0}
        Laya.stage.on("gameOver",this,function () {
            this.owner.getComponent(Laya.RigidBody).linearVelocity = {x:0,y:0}
          })
    }
}

接着就将做好的一个山体做成预制体

首先点击右上角的存盘功能，然后输入预制体名称点击确定就可以在Scene文件夹下看见一个prefab文件夹，我们做好的预制体就在里面。

constructor() {
        super();
        /** @prop {name:wallPrefab,type:Prefab,default:null}*/
        this.wallPrefab;
    }

接着在Scene挂载的脚本中添加可挂载Prefab的代码，然后再IDE中将预制体拖拽到脚本上。