Laya Game Mole

环境配置

项目名称：打地鼠 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));}}
}

Laya Game Mole相关推荐

laya zip更新方案
1.将要打包的的资源和layaairfiles.txt文件一起打成zip. 2.预加载阶段,先将zip包通过downfile下载并解压到缓存目录. 3.设置baseurl,开始预加载所有资源. 4.下 ...
使用Laya引擎开发微信小游戏（下）
本文由云+社区发表 6. 动画 6.1 创建伞兵对象在src目录下创建一个新目录role,用来存放游戏中角色. 在role里创建一个伞兵Soldier.ts对象文件. module role{exp ...
laya 自定义组件加载错误：显示空白
laya ide 自定义组件的制作与使用 https://ldc.layabox.com/doc/?nav=zh-js-2-2-3 在xml定义时,resName="sbtn" i ...
Laya 位图字体制作（失败...）
参考: 官网教程-位图字体的制作与使用一.下载字体并安装字体从站长字体下载了液晶数字字体,将TTF文件拖入C盘windows/Font文件夹,则字体会自动安装二.下载字体制作工具 Bitmap ...
手动脱Mole Box壳实战总结
作者:Fly2015 这个程序是吾爱破解脱壳练习第8期的加壳程序,该程序的壳是MoleBox V2.6.5壳,这些都是广告,能够直接无视了.前面的博客手动脱Mole Box V2.6.5壳实战中已经给 ...
ARC078F - Mole and Abandoned Mine(状压DP)
ARC078F - Mole and Abandoned Mine Solution 状压dpdpdp. 首先去掉边最小=选取边最大,答案为所有边权和减掉选取边权和,于是我们想要最大化选取的边权和. ...
identity_insert 如何改为on_十分钟教你如何快速提高Laya构建速度，还不快来康康？...
前言如何快速提高Laya构建速度微信小游戏推出之后,很多公司也相应的进入到微信小游戏这个领域,现在市场上的游戏开发引擎,如Cocos.Egret.Laya都对小游戏有了很好的兼容性.而在实际开发中 ...
Laya自动图集原理
关于Laya自动图集 Laya会把size小于512*512的图片打入自动大图集中.如果图片被打入自动图集中,图片的内存就交由Laya自动处理,开发者不能手动删除. Laya最多生成6张2048*20 ...
AS开发者转LAYA一周心得
LAYA太神奇了,你可以完全不会H5,会AS3就能开发出H5游戏

Laya Game Mole

场景规划

创建项目 Mole.laya

初始场景 StartScene.scene

游戏场景 GameScene.scene

制作界面

地鼠显隐

锤子敲击

倒计时进度条

得分显示

积分漂字

战绩结算

地鼠隐藏消失

Laya Game Mole相关推荐

最新文章

热门文章