开发一款象棋小游戏，素材我只用了6KB！
2023-03-26 20:24:41
|
来源：腾讯云
小游戏的加载速度是非常重要的，如果能把素材压缩至6KB，那么用户体验会非常爽！有助于留存用户。
(资料图片仅供参考)
引言
先给大家看一下6KB实现的象棋棋盘的效果：
再给大家介绍一下，6KB是什么概念？
腾讯云左上角的logo，大小是3KB。6KB相当于两个腾讯云的LOGO！
当然，我做的这个联机对战象棋，目前没有动画和炫酷的特效，没有语音和BGM，其实不算是一款小游戏，更像是一个工具。
下面，给大家分享一下我是如何用6KB素材实现的。
开发前的思考
我希望我的游戏体积是小的，不要安装太多静态资源依赖。我希望游戏画面是可以放大且保真的，即尽量使用矢量图。因此，我决定采用SVG绘制棋盘，并且使用SVG绘制棋子。而且，棋子上的汉字，就直接用 text文本展示，不再用图片。
用SVG绘制棋子
设计，本来应该交给设计师做，但是我只有自己开发，没有专业的设计师，所以只好硬着头皮上了。
之前开发 五子棋 ，就是我自己不断调参数，修改渐变色的色号，才看起来像棋子。
徒手画一个象棋棋子，亲自调色号，实在是太难了。
所以，我直接借鉴了playok的象棋棋子（我是非商业用途，就直接参考了），有如下特点：
棋子以黑色、红色为背景，双方博弈时，比较容易分清敌我（相比现实中，双方棋子背景颜色都是木头色，是用文字颜色区分敌我）。棋子顶部有光、底部有阴影，比较令人舒适。UI简洁，容易复刻。图示如下：
我放大分析，每个棋子由4个圆组成：
最内层的圆圈：纯色。往外一层，是一个径向渐变的，从上方的白色，渐变到中部，再渐变到下方的红色/黑色。再外一层，是一个纯色的很窄的圆圈，是棋子边界。最外层，有一个往下方偏移的阴影。定义阴影
定义黑色棋子
定义红色棋子
展示棋子
帥 用ttf定义字体样式
如果直接展示text，就会用系统字体。这没有象棋的味道。象棋，当然要用经典的「隶书」。
使用font face
因为并非所有设备上都有隶书字体，而且不同设备的字体也可能有差异。所以我需要通过font face给用户下载隶书字体（网上找的可以非商用的字体），展示棋子文字。
font face可以定义字体，可以引用本地字体文件或下载字体文件。例如：
@font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");}压缩字体
但是字体文件ttf比较大，所以我找到了「fontmin」这个工具，可以把字体文件给缩小，使字体文件ttf只保存所需字符。
最终压缩到了5K：
修改字体文件
但是我遇到个问题，使用该字体后，文字位置不在中间了（即使我已经设置了text-anchor="middle"和alignment-baseline="central"），所以我需要修改下字体文件。
我找到了可以编辑字体文件的工具：https://font.qqe2.com ，可以直接导入字体文件编辑。如下图：
有一些关键的线：
ascent: 顶部参考线（不推荐字体超出）。capHeight: 大写字母H的高度的参考线。xHeight: 小写字母x的高度的参考线。Baseline: 各位CSS大神应该都知道是啥意思了，文本对齐经常遇到的那个baseline。对标英文字母四线三格的倒数第二条线。descent: 底部参考线（不推荐字体超出）。只要我把每个字体选中，居中就好了～最后再导出字体文件，文字不居中的问题就解决了！
最终效果
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注我，交个朋友）。转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩UNO、斗地主、五子棋、飞行棋、一夜狼、象棋、德国心脏病、达芬奇密码等游戏，不收费无广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这个专栏里分享：《教你做小游戏》。
