【Cocos Creator 实战】06 - 如何给拼图游戏添加计时器
文章目录
- 概览
- 主要内容
- 项目资源
- 开搞
- 项目结构
- 字体
- 如何控制节点的显示&隐藏
- 如何设置节点的相对位置 & 自动大小 & 对齐策略
- 如何防止节点的点击穿透
- 如何倒计时
- 总结
- 知识点
- 下一步
继续继续。
上一篇地址：【Cocos Creator 实战】05 - 如何判断拼图完成（胜利）
概览
主要内容
来看看今天要做的内容：
- 如何给拼图游戏加上计时器（timer）
- 如何控制节点显示/隐藏
- Widget（对齐挂件）的使用
来看看将要实现的效果：
1、倒计时结束前仍未拼完
2、倒计时结束前已拼完
项目资源
- 项目地址：https://github.com/BottleMan/Bottle-s-Jigsaw/tree/06_add_timer
- 演示地址：点击前往
推荐大家先把项目 clone 到本地，然后参考着代码来看本篇文章。
我的每篇文章会对应一个分支，大家直接看对应的分支就可以，master 对应的是最新的内容，会整合各个分支。
演示地址也是对应每篇文章独立部署的。
开搞
项目结构
我们先来看一下我们这次修改的内容：
其中，绿框选中的是新增的文件，黄框选中的是修改的文件。
字体
注意我们上面图片中 ① 的部分，这里面的内容表示字体文件。
Cocos Creator 目前支持三类字体资源：系统字体，动态字体和位图字体。
- 系统字体：在创建label的时候，指定
Use System Font即可。 - 动态字体（矢量字体）：目前
只支持 TTF格式的动态字体。 - 位图字体（点阵字体）：由 fnt 格式的字体文件和一张 png 图片组成，fnt 文件提供了对每一个字符小图的索引。
我们在定时器中使用的就是 位图字体 。
注意在使用位图字体的时候必将 fnt 文件和 png 文件同时拖拽到资源管理器中。
简单说一下这 动态字体（矢量字体） 和 位图字体（点阵字体） 的区别哈。
以下内容引自维基百科：
- 矢量字体
矢量字体是与点阵字体相对应的一种字体。矢量字体的每个字形都是通过数学方程来描述的，一个字形上分割出若干个关键点，相邻关键点之间由一条光滑曲线连接，这条曲线可以由有限个参数来唯一确定。矢量字的好处是字体可以无级缩放而不会产生变形。向量字體在顯示或者打印出來之前需要進行光柵化。目前主流的矢量字体格式有3种：Type1，TrueType和OpenType，这三种格式都是平台无关的。
- 点阵字体
点阵字体(Dot-matrix-fonts)也叫位图字体(Bitmap-fonts)，其中每个字形都以一组二维像素信息表示。這種文字顯示方式於較早前的電腦系統（例如未有圖形介面時的 DOS 操作系統）被普遍採用。由于位图的緣故，点阵字体很难进行缩放，特定的点阵字体只能清晰地显示在相应的字号下，否則文字只被強行放大而失真字形，產生成馬賽克式的鋸齒邊緣。但對於字型大小 8-14px 的尺寸較小的漢字字體（即現今操作系統大多採用的預設字型大小）現今亦仍然被使用於熒幕顯示上，能夠提供更高的顯示效果；不過現今該種點陣字體主要只作為「輔助」的部分，當使用者設定的字體尺寸並無擁有點陣圖像時，字體便會以向量圖方式顯示；而當列印時，印有字體無論大小亦會使用向量字型打印。
好吧，说人话。
点阵字体和矢量字体最大的区别在于缩放之后是否清晰上。点阵字体放大之后会不清晰，而矢量字体不存在这个问题。
点阵字体的优势是速度快，省资源，很容易把字体效果做好。
是不是还是不清楚，感觉对我们敲代码没什么帮助呀。
那就简单记住下面的两句话。
- 数字&字母的显示，考虑用效果好的
位图字体（点阵字体） - 汉字的显示，尽量用
动态字体（矢量字体），然后给字体加效果
上面两句话不是绝对的，但是刚开始做的时候，按照这个方式来，不会有什么大问题。
如何控制节点的显示&隐藏
两种方式哈，一种是在资源管理器（Cocos Creator 编辑器）中设置，一种是通过代码设置。
-
资源管理器中设置
如上图，先在编辑器中选中节点，然后将属性栏中左上角的checkbox勾选掉，这样，这个节点就不会显示了，同样的，这个节点的子节点也都不会显示出来。 -
代码设置
this.node.active = true; //打开（显示）
this.node.active = false; //关闭（隐藏）
简单吧，为什么要设置节点的隐藏呢？因为我们不想让游戏一开始的时候就把结束的窗口弹出来，就这么简单。
那有的人说了，为什么不在结束的时候再生成新的窗口呢？
我只能说，可以，但没必要，这种基础的，没什么变化的节点，只是单纯的控制显示/隐藏即可，没必要动态生成，敲代码不累啊。
如何设置节点的相对位置 & 自动大小 & 对齐策略
比如，我想要在距离屏幕左上角 x=100、y=100 的位置放置一个节点，可以怎么做呢？
比如，我想要做一个距离屏幕各个边的距离都是 50 的节点，我要怎么设置呢？
再比如，我想做一个蒙层，把整个屏幕都盖住，咋整？
大家想一想，根据我们目前掌握的知识，有没有方法做到。
在这里思考 30s。
在这里思考 30s。
在这里思考 30s。
在这里思考 30s。
在这里思考 30s。
有，对吧。
我们可以获取屏幕的大小，然后再根据我们前面讲的坐标的理论，动态的计算各个节点的大小、动态的计算各个节点的位置，就可以了。
但是很麻烦。
今天我们来介绍一个更简单的方法：对齐挂件（Widget）
Widget 是节点的一个组件，在 Cocos Creator 编辑器中直接添加就可以：
再看看这个东西的设置：
这里的 Top、Left、Bottom、Right 对应的 checkbox 就是是否启用这个方向的对齐策略，其对应的输入框就是具体的对齐的数值。
还有很重要的一个属性，而且是很容易被忽略的属性就是 Target。
他表示我们采用对齐策略时参考的目标节点，毕竟没有目标的话， 设置相对位置就是胡扯。这个属性的默认值是当前节点的父节点。
还有个小知识点：Canvas 节点会始终保持和屏幕大小一致。
好了，根据上面知识点，我们能看出来，上图中的设置，是设置一个 覆盖整个屏幕 的节点。
如何防止节点的点击穿透
什么是点击穿透呢？简单来说，就是你点击了上层的节点，但是这个节点下层的节点响应了点击事件。
这是浏览器的默认策略。
如果我们不屏蔽默认的点击穿透，就会出现下面这种情况：
我们已经弹出了结束窗了，也盖上蒙层了，但是还能操作后面的拼图。
我们要做的，就是防止这件事！
上代码：
this.maskNode.on('touchstart', function (event) {
event.stopPropagation();
});
this.maskNode.on('touchend', function (event) {
event.stopPropagation();
});
其中 maskNode 就是我们那个覆盖整个屏幕的蒙层节点。
搞定。
如何倒计时
上面说了半天，还没点题呢，怎么添加计时器。
schedule：开始一个计时器scheduleOnce：开始一个只执行一次的计时器unschedule：取消一个计时器unscheduleAllCallbacks：取消这个组件的所有计时器
简单吧。
看看我们的核心代码:
stopTimer() {
this.unschedule(this.__timerCallback);
},
__startTimer() {
this.count = 60;
this.schedule(this.__timerCallback, 1);
},
__timerCallback() {
if (this.count <= 0) {
this.unschedule(this.callback);
this.endManager.getComponent('end-manager').showLose();
return;
}
this.count--;
this.timerLabel.string = "00:" + this.__prefixZero(this.count, 2);
},
__startTimer 方法是开启我们的计时器，倒计时 60s，间隔 1s，每次执行 __timerCallback 方法。
__timerCallback 方法中先判断计时是否结束，如果没结束，要更新 label 的值。
其实使用 js 的 setTimeout 和 setInterval 也可以实现大部分功能，大家可以灵活选用。一般情况下还是推荐大家使用 scheduler 来实现
OK了。
总结
知识点
1、矢量字体 和 点阵字体 的区别与如何选用
2、如何控制节点的显示与隐藏（两种方式）
3、对齐挂件（Widget）的使用
4、如何防止节点的点击穿透
5、计时器的使用
下一步
前面断断续续也写了几篇教程了，收到了以为热心同学的反馈：
在拼图游戏中，如果几块拼图都重合在一个锚点，感觉会降低游戏体验。可是如何做到移动图片至已经存在图片的锚点时，将后来的图片弹到其他区域（也就是说有图片的锚点不能吸附新的图片）。这种功能该怎么实现呢？
真是不好意思，一直没有弄出来。
下一步，我们就来优化这个问题。
PS：其实这次的标题虽然是如何给游戏添加计时器，但关于计时器的内容还真是挺少的。刚开始把例子和文章都写好了，但是觉得知识点太少了，就完善了一下结束时的弹出窗，结果就引出了上面 1234 四个知识点，一发不可收拾。
下一篇地址：【Cocos Creator 实战】07 - 如何让拼图回到原位（优化自动吸附规则）