转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/83064291
<https://blog.csdn.net/zzx023/article/details/83064291>

 

经过上一节的碰撞系统,我们已经基本完成一个微信小游戏核心玩法部分的开发工作。接下来我们需要开发另一块重要的东西:UI

 


CocosCreator为我们提供了很多已封装好的UI组件,这些组件基本上可以满足我们正常的开发需求。当然针对一些项目中的特殊需求,我们也可以通过定制制作符合需求的自定义UI。针对目前我们这个小游戏来讲,Cocos本身提供的UI已经是绰绰有余了。

关于UI控件的使用,参考官方文档:

http://docs.cocos.com/creator/manual/zh/ui/ui-components.html
<http://docs.cocos.com/creator/manual/zh/ui/ui-components.html>

 


在第一节中,我们在Camera下面创建了一个widget节点作为HUD界面的父节点。这个HUD界面始终会在Camera的范围内,因此我们不用担心Camera的移动会导致我们的一些UI处于范围外而无法正常显示。

 

使用Widget,Sprite,Label,Button这些控件,我们可以很快速的在剪辑器中拼凑出下面的UI界面:





 

接下来我们先实现开始游戏按钮的功能。

关于Button控件的使用,参考官方文档:

http://docs.cocos.com/creator/manual/zh/components/button.html
<http://docs.cocos.com/creator/manual/zh/components/button.html>

 

由于我们的资源只有1张图片,并没有做按钮按下状态的资源。因此button的按钮按下状态过渡类型我们选择Scale。



在这个选项下,按钮按下时,按钮会进行缩放。缩放值以及切换时间可以通过Duration和ZoomScale去设定。



 

现在我们先看下开始游戏按钮按下后我们需要实现什么功能:

* 鱼钩开始下沉
* MainUI消失不显示,也就是隐藏开始游戏按钮,游戏logo,排行榜按钮。
 

之前我们处于便于调试的原因,让游戏一运行就自动开始,现在我们需要把开始的功能放在按钮的点击事件中。

首先在之前的Hook.js脚本的start方法中,把调试用的鱼钩开始运动的代码去掉。



 

在开始游戏按钮的属性检查器中,将ClickEvents设置为2。




点击事件有四个参数,1为点击事件的接收者节点,这个节点必须带有脚本,2为脚本组件的名称,3为指定的回调方法,4CustonEventData为回调方法的传入参数(可不填)



 

在层级管理器中,使用鼠标将Hook节点拖到ClickEvents,选择脚本Hook,回调方法为StartLine



这样在点击后就可以触发回调,调用鱼钩的StartLine方法,使鱼钩开始下沉

 

在第二个Event里,我们处理MainUi的不显示功能。先给MainUI挂载一个新的脚本MainUI.js。

脚本中我们实现一个叫Hide的方法,控制使MainUI不激活。
    Hide () {         this.node.active = false;     },
然后再第二个ClickEvent中,接收节点选择MainUI,选择脚本MainUI.js,回调方法为Hide

 

OK,这样就实现了开始按钮的功能了。

排行榜按钮也是类似,至于微信排行榜的制作,我们放在后面来讲述。

 

这样主界面就OK了。

 

 

 

下一步我们要开始实现深度Label和得分Label的功能了。

这个功能很简单,只需要根据游戏进程,更换Label中显示的文字即可。更换显示字符,可以通过给label的string属性进行赋值即可完成。

 

不过有个问题我们需要重视一下:

虽然我们可以在鱼钩与鱼发生碰撞时,计算并增加得分,同时改变得分label的显示内容,这很简单。

但是假如我们的需求没这么简单,例如到达一定分数我们要更换label字体的颜色,特点分数我们让得分数字跳一下等等。

当在这种复杂的需求下,如果在碰撞回调方法中实现这些功能后。你会发现,功能没问题,可是:


UI与鱼钩的关系变得非常的紧密,也就是耦合性非常强,有些时候简单的UI改动会变得复杂,不经意间,你可能还会破坏原有正常的鱼钩代码。而且按照正常逻辑来看,UI的显示应该只与UI以及数据有关,但是控制UI的代码却是放在鱼钩的脚本里面,与常理不合。

 

为了预防这种的情况的发生,我们引入一个跨脚本的全局数据用来记录。玩法逻辑仅仅只会改变数据的值,而UI也只需要从数据获取值并且显示即可。

这其实也就是设计模式的一个粗浅应用,但在实际项目中带来的好处可不小。

 

 

用来作为跨脚本的数据载体实现有很多,在现在这个微信小游戏中,我们就任性一点,使用单例来作为跨脚本的数据记录载体。

 

下面我们来先写一个单例的脚本

GameData.js
var GameData = cc.Class({     extends: cc.Component,     statics: {        
instance : null     },     properties: {         score : 0,//得分         depth :
0//深度     }, }); GameData.instance = new GameData(); module.exports = GameData;
 

使用时也很简单,在需要使用的脚本中require后,就可以通过GameData.instance获取到单例进行数据的读写。

 

例如HUD的脚本,HUD.js
var GameData = require("GameData"); cc.Class({     extends: cc.Component,    
properties: {         mScoreLabel : cc.Label,         mDepthLabel : cc.Label
    },     start () {     },     update (dt) {         this.mScoreLabel.string
= GameData.instance.score;         this.mDepthLabel.string = "深度:" +
GameData.instance.depth.toFixed(2);     }, });
 

具体关于得分以及深度的数据读写我就不一一贴出来了,都比较简单,相信大家都能够实现出以下的效果:

     

 


OK,如法炮制,结束界面也可以很快就能够做好。需要注意的一点是,在玩家点击“再玩一局”时,需要重置一下场景数据,你可以在Scene.js中写一个reset方法,用于点击时调用。
    reset () {         GameData.instance.depth = 0;        
GameData.instance.score = 0;         //清除鱼钩上挂着的鱼        
this.mFishPool.removeAllChildren(true);         //清除海里面的所有鱼        
this.mController.removeAllChildren(true);     },
最终效果如下: