引言

先给大家看一下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。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这个专栏里分享：《教你做小游戏》。