微信小游戏包体限制4M,一个字体就11.24M,怎么玩?

引言

哈喽大家好,很多时候,我们的游戏项目为了美观和保证风格的统一,都会用到外部字体库。

但是 ,外部字体库通常是完整的字库,体积非常的大,例如完整的simkai字体库就达到了11.24MB

要知道 ,现在的微信小游戏限制主包的大小不能超过4M,即使你把字体放在分包,占去近50%的代码包大小,想想也不太合适。

因此,我们如果想要能够顺利地在游戏中用上漂亮的字体,那我们得想办法将字库瘦下来。

言归正传 ,本期将带小伙伴们一起来看下,如何将我们想用的字库从11.24M瘦到不到1M

本文源工程可在文末获取,小伙伴们自行前往。

精简字库原理

据了解 ,一个完整的字库估计有3~4万个汉字,但实际上我们游戏项目需要用到的可能只占10%~20%,甚至更少,像其中的一些汉字囧、烎、嫑、勥、忈、巭、怹、颪、氼、兲‌,别说用,笔者连读都不会读。(会读的小伙伴请打在评论区,我给你点赞)

游戏项目中,用到文字的地方通常包含下面几个:

  • 1.游戏配置 (*.json),一般配置里面的中文最多。

  • 2.预制体 (*.prefab),有些静态的文字通常就在预制体的Label里。

  • 3.场景 (*.scene、*.fire)同上。

  • 4.代码 (*.ts),写死在代码里的。

因此 ,要瘦身字体,按照以下2个步骤即可:

  • 1.通过工具将上述地方的文字提取出来。
  • 2.通过工具从字库中的保留我们提取到的文字,其余的删除。

精简字库实例

1.提取中文字

要提取 中文字,我们只需要按照上面的原理,遍历我们的游戏项目中的游戏配置预制体场景代码进行匹配即可。

其中 遍历文件,笔者使用的是glob

匹配 中文字的正则表达式是/[\u4e00-\u9fff]/g

2.精简字库

这里 我们使用百度出品的字体子集化工具Fontmin。可以直接通过npm install fontmin进行安装。

工具 的使用也非常简单,通过传入原字体保留的字符字体输出目录 ,最后通过fontmin.run这个API生成即可。

3.效果演示

通过 node font-minifier.js --project=C:\Users\Administrator\Desktop\demo --source=C:\Users\Administrator\Desktop\simkai.ttf传入工程目录和原字体路径即可。

执行结果可以看到扫描的所有文件。

提取到的所有中文字。

生成的文件及其大小。

精简后 的字体大小为802K

更进一步

除去我们遍历出来的游戏设定的中文字,其实还有一部分中文字我们是不确定的,那就是用户自定义的内容,例如名字和聊天文字。

想要处理这一部分文字,我们只能通过预设,猜到用户会自定义的内容,从而预设保留,可以通过网络上分享的常用内容来完成。

此外工具可以集成到插件或者打包系统里面去,这样后续就不用考虑相关问题,自动生成所需字库即可。

结语

通过上述方法,可以将字库大幅度精简到能够使用的状态,但是也会有一定的瑕疵。

不知道小伙伴们有没有更完美的办法呢?

本文源工程 可通过私信 发送 fontminifier 获取。

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。

实不相瞒,想要个爱心 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

知识付费专栏

你知道和不知道的微信小游戏常用API整理,赶紧收藏用起来~

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

相关推荐
望道同学24 分钟前
PMP/信息系统项目管理师 9 张 思维导图【考试必备】
前端·后端·程序员
局i1 小时前
Vue 中 v-text 与 v-html 的区别:文本渲染与 HTML 解析的抉择
前端·javascript·vue.js
菜鸟冲锋号2 小时前
问题:增量关联(实时同步新数据) 这个场景中,如果hudi_pay 变更了一条数据,hudi_order_pay_join 结果的数据会跟着变化吗
服务器·前端·数据库
贩卖黄昏的熊2 小时前
typescript 快速入门
开发语言·前端·javascript·typescript·ecmascript·es6
拾柒SHY2 小时前
XSS-Labs靶场通关
前端·web安全·xss
前端婴幼儿2 小时前
前端主题切换效果
前端
一 乐2 小时前
水果销售|基于springboot + vue水果商城系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端
Qin_jiangshan2 小时前
如何成为前端架构师
前端
dolt022 小时前
基于deepseek实现的ai问答小程序
前端·开源
一只小bit3 小时前
Qt 快速开始:安装配置并创建简单标签展示
开发语言·前端·c++·qt·cpp