引言
哈喽大家好，我是亿元程序员，一位有着8年游戏行业经验的主程。
不知道小伙伴们有没有玩过汉字类小游戏。
最近，汉字找茬、拆字组合、错别字挑战、看笔画猜字等休闲玩法越来越常见。
在这些游戏中，汉字不再只是一个普通的文字，而是变成了可以点击、拆分、移动和组合的游戏元素。
有的玩法需要从复杂汉字中找出其他字，有的需要拖动偏旁部首组成新字，还有的会按照正确笔顺，一笔一笔地显示汉字。
作为玩家，我们看到的可能只是一个逐渐出现的汉字。
但是作为开发者，问题就来了：
-
一个完整汉字怎样拆分成不同笔画？
-
怎样单独控制某一笔的颜色？
-
怎样按照正确笔顺显示每一笔？
-
普通的
CocosLabel能实现这些效果吗？
答案是：普通 Label 并不适合。
Label 可以显示一个完整字符，但它不知道一个汉字由多少笔组成，也不能让我们单独控制其中某一笔。
因此，我们需要换一种思路：
不把汉字当成普通文字，而是把每一笔当成一块可以独立控制的矢量图形。
本期我们使用 Cocos Creator 3.8.7，实现一个极简的汉字小游戏演示。
普通字体为什么不够用?
通常情况下，我们会在 Cocos 中使用 Label 和字体文件显示汉字。
这种方式很适合标题、按钮和游戏说明，但不适合拆字和逐笔玩法。普通字体主要保存完整字形轮廓，不会直接告诉我们：
- 哪一块轮廓属于哪一笔；
- 汉字的正确笔顺是什么；
- 玩家点击的是第几笔；
- 某个笔画应该单独显示什么颜色。
讲到这里，可能会有小伙伴提建议找美术妹子帮忙，把文字笔画做成图片！
把汉字制作成图片序列虽然也能实现效果，但每增加一个字都要重新切图。文字数量一多，资源制作和管理都会变得很麻烦。
SVG 笔画数据则更适合这类需求。每一笔都是独立矢量路径，可以自由缩放、填充颜色和控制显示顺序。
汉字笔画数据从哪里来?
本项目使用开源的 Hanzi Writer Data，包含独立笔画外轮廓和笔画中心线。
点进去就能看到我们常用的汉字的数据:
提取项目需要的汉字
上述数据中，完整的库有 30.8 M，一般来说我们只需要提取我们自己游戏所需的汉字，有下面几个方案：
1.直接手动下载
从开源网站上直接选择我们需要的字，下载下来。
2.小孩子才做选择，完整下载
非常庞大的库，慎重！
3.写工具提取
**因为项目并不需要整个汉字库。**需要哪些汉字就提取哪些汉字，可以减少无关资源，也方便维护数据来源。
当然了，小伙伴想要展现自己的能力时，可以先用方案2，等到策划反馈的时候再用方案3，不过笔者不保证你的安全。
有需要哪些字直接跑脚本即可：
npm run hanzi:extract -- "亿元程序员"
就能得到我们需要的汉字数据：
汉字 JSON 中有什么?
打开任意一个汉字 JSON，可以看到以下结构：
{
"character": "亿",
"source": "hanzi-writer-data@2.0.1",
"license": "Arphic Public License",
"strokes": [],
"medians": []
}
1.strokes：笔画外轮廓
strokes 按照正确笔顺保存每一笔的 SVG 路径。
{
"strokes": [
"M 228 715 Q 257 749 ... Z",
"M 498 604 Q 572 617 ... Z"
]
}
每一个数组元素就是一笔。单独填充某个路径，就能显示对应笔画。
2.medians：笔画中心线
medians 保存每一笔内部的中心点。
本期的点击逐笔演示暂时不使用中心线，但它可以继续用于：
- 玩家描红轨迹判定；
- 笔画点击命中判断；
- 起笔方向检测；
- 后续的书写过程动画。
SVG 路径怎样画出汉字?
打开 strokes 中的路径，可以看到很多字母和数字：
M 440 788 Q 497 731 535 718 ... Z
这些字母是 SVG 标准路径命令。
| 原始字符 | 完整名称 | 具体含义 |
|---|---|---|
M |
MoveTo |
移动画笔到轮廓起点，不绘制线条。 |
L |
LineTo |
从当前位置绘制直线到目标位置。 |
Q |
QuadraticBezierTo |
使用一个控制点绘制二次贝塞尔曲线。 |
C |
CubicBezierTo |
使用两个控制点绘制三次贝塞尔曲线。 |
Z |
ClosePath |
连接回轮廓起点，形成可填充区域。 |
在 Cocos 中解析 SVG
项目先使用正则表达式拆分路径命令和坐标：
然后根据不同操作读取对应数量的坐标，并调用 Cocos Graphics的方法：
路径解析完成后调用：
一笔带有真实粗细和转折的汉字轮廓就绘制出来了。
效果演示
更进一步
完成点击逐笔显示后，就可以继续扩展更多汉字小游戏玩法。
-
1.看笔画猜汉字 : 玩家每点击一次显示一个新笔画，使用笔画越少猜出答案，获得的分数越高。
-
2.笔顺点击挑战 : 先显示完整汉字的浅色轮廓，让玩家按照正确顺序点击笔画。点击错误时给予震动或颜色提示。
-
3.偏旁部首拆分 : 将多个笔画组合成偏旁部首，再通过拖动完成汉字组合。
-
4.汉字描红 : 使用
medians中心线判断玩家触摸轨迹是否位于正确笔画范围内。 -
5.逐笔书写动画 : 沿中心线逐渐显示当前笔画，是可以继续研究的进阶效果。由于真实笔画粗细变化较大，需要结合遮罩或笔画轮廓裁剪，不能只用一条固定宽度的粗线代替。
结语
通过本文的方式，我们已经在 Cocos Creator 3.8.7 中实现了真实汉字 SVG 笔画渲染和点击逐笔显示。
不知道小伙伴们有没有想到哪些有意思的汉字游戏可以用上这个方案呢？ 欢迎在评论区或者私信笔者一起探讨~
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助，也希望通过您能帮助到大家。
实不相瞒，想要个赞和爱心！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：
