上一篇《Cocos Creator之打鼓庆新年(上)》我们已经把首页场景做完了,今天我们就要开始制作打鼓游戏场景了。
创建并进入游戏场景
在 Scenes
中创建 Game
场景,双击 Game
场景进入游戏场景。
添加背景图
和 Home
场景中一样,我们需要做一下几个步骤:
- 在
Canvas
节点中创建游戏
空节点; - 修改
游戏
节点的Anchor
上的y
为0.6445
,让截掉的上部分显示出来; - 在
游戏
空节点上添加Sprite
组件; - 然后将
Images
目录中的game_bg.png
拖到Sprite
中的Sprite Frame
中; - 点击 工具栏 中的
,打开浏览器进行预览;
添加分数节点
看上面的效果图,左上角有一个分数显示,玩家每点击一次,就加一次相应的分数。
- 在
Canvas
节点中创建得分
空节点 - 在
得分
节点中添加Label
节点,重命名为分数
,并在右侧Label
组件中,修改String
属性的值为 分数:
- 在
得分
节点中再添加一个Label
节点,重命名为0
,并在右侧Label
组件中,修改String
属性的值为 0
- 最后将位置修改好
添加时间节点
- 在
Canvas
节点中创建时间
空节点 - 在
时间
节点中添加Label
节点,重命名为0:00
,并在右侧Label
组件中,修改String
属性的值为 0:00 - 最后将位置修改好
添加打鼓娃娃节点
在添加 打鼓娃娃
节点之前,我们需要将打鼓娃娃的动画图集用 TexturePackerGUI 制作出来,制作出来的文件为 click.plist
,然后将 click.plist
文件放到 Images
中,和 click.plist
一起放进去的还有对应的图集 click.png
。
- 在
Canvas
节点中创建Sprite
节点,重命名为打鼓娃娃
; - 从
click.plist
中选取初始状态的帧图片放到Sprite Frame
中;
打开浏览器预览动效果就是这样的:
添加打击区域节点
- 在
Canvas
节点中创建Sprite
节点,重命名为打击区域
; - 将
Images
中的clickarea.png
添加到打击区域
的Sprite Frame
中 - 将节点位置设置好
打开浏览器预览动效果就是这样的:
小结
到这里我们的游戏界面就做完了,现在要开始针对里面的业务逻辑进行开发,主要包括:倒计时、点击打击区域打鼓动画、点击打击区域添加分数
倒计时
- 在
Scripts
目录中添加CountDown.ts
脚本 - 点击
0:00
节点,将CountDown.ts
脚本拖到0:00
右侧的 属性检查器。 - 在
CountDown.ts
添加time
属性,这样方便在编辑器中修改倒计时的时长。
const {ccclass, property} = cc._decorator;
@ccclass
export default class CountDown extends cc.Component {
//添加 time 属性,方便在编辑器中修改时长
@property(cc.Integer)
private time:number = 0;
//存放 0:00 节点中的 Label 组件
private nodeLabel:cc.Label;
/*
在 onLoad 中获取 0:00 节点中的 Label 组件
然后将 Label 上的 string 属性值改为 time 中修改的值。
*/
onLoad(){
this.nodeLabel = this.node.getComponent(cc.Label);
//游戏加载完成后设置倒计时时长
this.nodeLabel.string = this.time + ":00";
}
start () {
}
/*
在 update 中进行倒计时,每次帧变化的时候就减去帧刷新的时长,
在 Cocos Creator 中 0.166 s帧刷新一次。
将减去后的时间赋值到 nodeLabel 上
*/
update (dt) {
if(this.time > 0){
this.time -= dt;
this.nodeLabel.string = this.time.toFixed(2).replace(".",":");
}else{
this.time = 0;
this.nodeLabel.string = this.time.toFixed(2).replace(".",":");
}
}
}
假设我们现在设置时长为 5
,打开浏览器可以看到效果:
点击打击区域打鼓动画和添加分数
思路:打鼓的时候应该是点一下,左手打一下鼓,再点一下,右手打一下鼓,当不点击应该停止打鼓。根据我们的图集情况,可以看出,点击一下切换到左手打鼓图片,再点击一下切换到右手打鼓图片。
- 在
Scripts
中创建beatDrum.ts
文件 - 选中
打击区域
,将beatDrum.ts
拖到打击区域
右侧的 属性检查器。 - 在
beatDrum.ts
中添加drumArea(打鼓娃娃Sprite 组件)
、beatAtlas(打鼓娃娃图集)
、beatScore(得分中 0 的Label组件)
属性 - 将对应的节点拖到属性中
代码如下:
//打鼓娃娃的 Sprite 组件
@property(cc.Sprite)
private drumArea: cc.Sprite = null;
//打鼓娃娃图集
@property(cc.SpriteAtlas)
private beatAtlas: cc.SpriteAtlas = null;
//分数 Label 组件
@property(cc.Label)
private beatScore: cc.Label = null;
//点击次数
private beatnum = 0;
onLoad(){
//打击区域的 TouchStart 时间
this.node.on(cc.Node.EventType.TOUCH_START,function(){
// 获取图集中没有打击的帧
let frame = this.beatAtlas.getSpriteFrame("noclick");
/*
点击次数为奇数用 leftclick 帧,也就是左手打鼓
点击次数为奇数用 rightclick 帧,也就是右手打鼓
*/
if(this.beatnum % 2){
frame = this.beatAtlas.getSpriteFrame("leftclick")
}else{
frame = this.beatAtlas.getSpriteFrame("rightclick")
}
//将帧赋值到打鼓娃娃的 Sprite Frame 上
this.drumArea.spriteFrame = frame;
//打击次数 +1
this.beatnum += 1;
/*
分数就等于打击次数,这里粗略写的,也可以再
加一个属性为总分数,每次点击的时候都计算总分数
*/
this.beatScore.string = '' + this.beatnum;
},this);
}
总结
游戏讲解到这里就结束了,这个游戏做的比较粗略,基本的功能都实现了,大家如果有兴趣,可以在游戏中添加自己想要的功能。
如果在开发过程中碰到问题,可以直接联系我!!
如果我的讲解中有误或者不清楚的,也请大家直接联系我!!
项目源码:打鼓庆新年