环境配置
- 项目名称：打地鼠 Mole
- 操作系统：Windows10
- 游戏引擎：LayaAir2.2.0beta3
- 开发语言：ES6
场景规划
- 开始场景 StartSceen.scene
初始场景使用一张背景图和一个切换场景的开始按钮组成，初始场景挂脚本即添加代码组件，为开始按钮添加点击事件，点击后切换到游戏场景。
- 游戏场景 GameScreen.scene
游戏场景中承载的元素很多， 主要包括：
- 多只地鼠随机显示隐藏
- 锤子动画与点击地鼠时分值计算
- 倒计时与得分实时显示
- 游戏结束视图中的总分与重新开始
创建项目 Mole.laya
- 创建【空项目】，【开发语言】选择JavaScript，使用ES6语法。
- 选择【编辑模式】按
Ctrl+N进入【新建场景】。
- 场景类型：Scene
- 场景名称：StartScene
- 场景宽度：1136px
- 场景高度：640px
- 选择【编辑模式】按
F9进行【项目设置】
- 起始场景：
StartScene.scene - 对齐模式：水平居中
center、垂直居中middle - 屏幕模式：横屏
horizontal - 适配模式：固定宽度
fixedwidth、设计宽高与场景保持一致 - 发布模式：文件模式
- 添加素材
- 将提前准备好的素材，规范化命名后，分类复制到
laya/assets文件夹下。 - 在
laya/assets文件夹下新建文件夹image用于保存图片
初始场景 StartScene.scene
初始场景
场景分析
- 背景图片：就是一张图片
- 开始按钮：背景按钮图片效果上，触碰会改变，点击则切换到游戏场景。
图片素材
-
背景图片：bg_start.png
bg_start.png -
开始按钮：btn_start.png
btn_start.png
编辑模式
- 添加背景图片，设置精灵属性。
- 图片名称：bg_start.png
- 组件类型：Sprite 精灵
-
var组件唯一的全局变量名称，可根据var获取对应组件，推荐使用素材名称本身进行扩展。这里设置为bgStart -
name组件名称，方便根据在组件树种进行查找。这里设置为bgStart。
- 为背景图片添加开始按钮，并设置按钮属性。
- 图片名称：btn_start.png
- 组件类型：Button 按钮
- 组件层级：开始按钮位于背景图片内，即开始按钮的父级是背景图片。
-
var变量名：btnStart -
name组件名：btnstart -
stateNum皮肤状态状态切割：2
代码模式
- 代码模式下在
src源代码文件夹下新增模板文件并选择脚本模板文件，新增StartScript.js初始场景脚本。 - 将初始场景脚本
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视图制作后添加到游戏场景中
战绩结算
地鼠隐藏消失
单个地鼠
编辑场景
- 编辑模式使用
Ctrl+N新建游戏场景Game.scene并设置选项 - 将游戏背景图片
bg_game.png添加到场景的层级管理器，并设置对齐方式。 - 在背景精灵图组件下级添加UI组件中的Box组件
- 在Box组件中添加普通主角
normal_1.png和角色蒙版masker_1.png
层级管理器
开发脚本
- 代码模式中在
src目录下新建模板文件选择新建脚本文件，命名为Game.js。 - 编辑模式中为
Game.scene游戏场景添加代码组件Game.js脚本 -
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() {
}
}
- 对于鼹鼠的活动单独封装在
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)
);
}
}
}