Laya Game Mole

环境配置

• 项目名称：打地鼠 Mole
• 操作系统：Windows10
• 游戏引擎：LayaAir2.2.0beta3
• 开发语言：ES6

场景规划

• 开始场景 StartSceen.scene

初始场景使用一张背景图和一个切换场景的开始按钮组成，初始场景挂脚本即添加代码组件，为开始按钮添加点击事件，点击后切换到游戏场景。

• 游戏场景 GameScreen.scene

游戏场景中承载的元素很多， 主要包括：

1. 多只地鼠随机显示隐藏
2. 锤子动画与点击地鼠时分值计算
3. 倒计时与得分实时显示
4. 游戏结束视图中的总分与重新开始

创建项目 Mole.laya

1. 创建【空项目】，【开发语言】选择JavaScript，使用ES6语法。
2. 选择【编辑模式】按Ctrl+N进入【新建场景】。

• 场景类型：Scene
• 场景名称：StartScene
• 场景宽度：1136px
• 场景高度：640px

3. 选择【编辑模式】按F9进行【项目设置】

• 起始场景：StartScene.scene
• 对齐模式：水平居中center、垂直居中middle
• 屏幕模式：横屏horizontal
• 适配模式：固定宽度fixedwidth、设计宽高与场景保持一致
• 发布模式：文件模式

4. 添加素材

• 将提前准备好的素材，规范化命名后，分类复制到laya/assets文件夹下。
• 在laya/assets文件夹下新建文件夹image用于保存图片

初始场景 StartScene.scene

初始场景

场景分析

• 背景图片：就是一张图片
• 开始按钮：背景按钮图片效果上，触碰会改变，点击则切换到游戏场景。

图片素材

• 背景图片：bg_start.png

  
  
  

  bg_start.png

• 开始按钮：btn_start.png

  
  
  

  btn_start.png

编辑模式

1. 添加背景图片，设置精灵属性。

• 图片名称：bg_start.png
• 组件类型：Sprite 精灵
• var 组件唯一的全局变量名称，可根据var获取对应组件，推荐使用素材名称本身进行扩展。这里设置为bgStart
• name 组件名称，方便根据在组件树种进行查找。这里设置为bgStart。

2. 为背景图片添加开始按钮，并设置按钮属性。

• 图片名称：btn_start.png
• 组件类型：Button 按钮
• 组件层级：开始按钮位于背景图片内，即开始按钮的父级是背景图片。
• var变量名：btnStart
• name组件名：btnstart
• stateNum 皮肤状态状态切割：2

代码模式

1. 代码模式下在src源代码文件夹下新增模板文件并选择脚本模板文件，新增StartScript.js初始场景脚本。
2. 将初始场景脚本src/script/StartScript.js注册到游戏配置文件src/GameConfig.js

$ vim src/GameConfig.js

/**This class is automatically generated by LayaAirIDE, please do not make any modifications. */
import StartScript from "./script/StartScript"

export default class GameConfig {
    static init() {
        //注册Script或者Runtime引用
        let reg = Laya.ClassUtils.regClass;
        reg("script/StartScript.js",StartScript);
    }
}
GameConfig.width = 1136;
GameConfig.height = 640;
GameConfig.scaleMode ="fixedwidth";
GameConfig.screenMode = "horizontal";
GameConfig.alignV = "middle";
GameConfig.alignH = "center";
GameConfig.startScene = "StartScene.scene";
GameConfig.sceneRoot = "";
GameConfig.debug = false;
GameConfig.stat = false;
GameConfig.physicsDebug = false;
GameConfig.exportSceneToJson = true;

GameConfig.init();

3.挂脚本，将StartScript.js脚本作为代码组件添加到StartScence.scene开始场景
4.写脚本，编辑模式下打开StartScript.js并实现功能。

$ vim src/script/StartScript.js

export default class StartScript extends Laya.Script {
    constructor() { 
        super(); 
    }
    onEnable() {
        console.log(this.owner, this.owner.name);
        //获取当前节点
        let node = this.owner;
        //获取开始按钮
        let btn = node.getChildByName("bgStart").getChildByName("btnStart");
        //判断节点是否存在
        if(btn !== null){
            //为开始按钮绑定切换事件
            btn.on(Laya.Event.CLICK, this, this.onClickStart);
        }
    }
    /*点击开始按钮 切换至游戏场景*/
    onClickStart(){
        Laya.Scene.open("GameScene.scene");
    }
    onDisable() {
    }
}

游戏场景 GameScene.scene

场景素材

• 场景背景 bg_game.png

bg_game.png

制作界面

地鼠显隐

• 地鼠包括两种形态精灵鼠和地鼠王，打到精灵鼠减分，打到地鼠王加分。
• 地鼠包括两种状态，普通状态即在洞口上升抬头保持观望下降消失，击中状态并附带积分漂字的效果。
• 地鼠随机在洞口出现显示，而且以随机以两种不同形态出现。

地鼠状态	状态
normal_1.png	精灵鼠普通状态
hit_1.png	精灵鼠击中效果
normal_2.png	地鼠王普通状态
hit_2.png	地鼠王击中状态

背景蒙版 masker_1.png

mas_01.png

蒙版的作用是为了遮挡地鼠的下半身，当地鼠上下运动时，产生地鼠在地洞冒头逃跑消失的视觉感受。

锤子敲击

• 锤子实际上是鼠标的cursor，或是触点。
• 锤子会跟随移动，当鼠标按下时触发锤子敲击动画效果。
• 锤子使用View视图制作后添加到游戏场景

倒计时进度条

• 组件参考 https://ldc.layabox.com/doc/?nav=zh-js-2-3-12
• API手册 https://layaair.ldc.layabox.com/api/laya/ui/ProgressBar.html

LayaAir中的进度条采用是系统内置基础组件UI组件中的ProgressBar

自定义进度条需要准备两张图片，分别作为进度条背景和进度条，以progressbar_和progress_前缀命名的资源会自动是被为进度条组件。

进度条背景图progress_time.png

progress_time.png

进度条图片progressbar_time$bar.png

progress_time$bar.png

设置进度条

设置进度条

得分显示

游戏中的得分显示使用的Laya的Clip切片组件实现的

得分显示

切片制作素材

clip_number.png

Clip切片Laya.ui.Clip组件可用于显示位图切片动画，Clip切片可以将一张图片按照横向分割数量clipX和竖向分隔数量clipY，或使用横向分割每个切片宽度clipWidth、竖向分割每隔切片的高度clipHeight，从左到右从上到下分割组合为一个切片动画。

• Clip API文档 https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip
• Clip组件参考 https://ldc.layabox.com/doc/?nav=zh-js-2-3-3

切片制作

切片制作

积分漂字

score_1.png

score_2.png

积分漂字

战绩结算

• 结算画面中包含最终得分和重新开始按钮
• 结算画面使用View视图制作后添加到游戏场景中

战绩结算

地鼠隐藏消失

单个地鼠

编辑场景

1. 编辑模式使用Ctrl+N新建游戏场景Game.scene并设置选项
2. 将游戏背景图片bg_game.png添加到场景的层级管理器，并设置对齐方式。
3. 在背景精灵图组件下级添加UI组件中的Box组件
4. 在Box组件中添加普通主角normal_1.png和角色蒙版masker_1.png

层级管理器

开发脚本

1. 代码模式中在src目录下新建模板文件选择新建脚本文件，命名为Game.js。
2. 编辑模式中为Game.scene游戏场景添加代码组件Game.js脚本
3. Game.js游戏脚本中实现单个鼹鼠的上下出现隐藏

$ vim src/Game.js

import Mole from "./Mole";
export default class Game extends Laya.Script {
    constructor() { 
        super(); 
        this.count = 9;
    }
    onEnable() {
        console.log("onEnable: owner="+this.owner.name);
        //获取鼹鼠对象的状态
        let box = this.owner.getChildByName("bg").getChildByName("item0");
        let normal = box.getChildByName("normal");
        let mole = new Mole(normal, 15);
        //显示鼹鼠
        mole.show();
    }
    onDisable() {
    }
}

4. 对于鼹鼠的活动单独封装在src/Mole.js文件中

$ vim src/Mole.js

/*鼹鼠类*/
export default class Mole{
    constructor(normal, yDown){
        this.normal = normal;

        this.yUp = this.normal.y;//获取鼹鼠正常态下Y轴位置
        this.yDown = yDown;//设置鼹鼠下降位置
        //参数重置
        this.reset();
        console.log(this);
    }
    //参数重置
    reset(){
        this.normal.visible = false;

        this.isActive = false;
        this.isShow = false;
        this.isHit = false;
    }
    //显示
    show(){
        if(this.isActive){
            return;
        }
        this.isActive = true;

        this.isShow = true;

        //显示
        this.normal.y = this.yDown;
        this.normal.visible = true;

        //动画
        Laya.Tween.to(
            this.normal,
            {y:this.yUp},
            500,
            Laya.Ease.backInOut,
            Laya.Handler.create(this, this.showComplete)
        )
    }
    //显示停留
    showComplete(){
        if(this.isShow && !this.isHit){
            Laya.timer.once(1000, this, this.hide);
        }
    }
    //隐藏消失
    hide(){
        if(this.isShow && !this.isHit){
            this.isShow = false;
            Laya.Tween.to(
                this.normal,
                {y:this.yDown},
                300,
                Laya.Ease.backIn,
                Laya.Handler.create(this, this.reset)
            );
        }
    }
}