环境配置
- 项目名称:打地鼠 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)
);
}
}
}