开发一款象棋小游戏，素材我只用了6KB！

小游戏的加载速度是非常重要的，如果能把素材压缩至6KB，那么用户体验会非常爽！有助于留存用户。

引言

先给大家看一下6KB实现的象棋棋盘的效果：

再给大家介绍一下，6KB是什么概念？

腾讯云左上角的logo，大小是3KB。6KB相当于两个腾讯云的LOGO！

当然，我做的这个联机对战象棋，目前没有动画和炫酷的特效，没有语音和BGM，其实不算是一款小游戏，更像是一个工具。

下面，给大家分享一下我是如何用6KB素材实现的。

开发前的思考

• 我希望我的游戏体积是小的，不要安装太多静态资源依赖。
• 我希望游戏画面是可以放大且保真的，即尽量使用矢量图。

因此，我决定采用SVG绘制棋盘，并且使用SVG绘制棋子。而且，棋子上的汉字，就直接用 text 文本展示，不再用图片。

用SVG绘制棋子

设计，本来应该交给设计师做，但是我只有自己开发，没有专业的设计师，所以只好硬着头皮上了。

之前开发 五子棋 ，就是我自己不断调参数，修改渐变色的色号，才看起来像棋子。

徒手画一个象棋棋子，亲自调色号，实在是太难了。

所以，我直接借鉴了playok的象棋棋子（我是非商业用途，就直接参考了），有如下特点：

• 棋子以黑色、红色为背景，双方博弈时，比较容易分清敌我（相比现实中，双方棋子背景颜色都是木头色，是用文字颜色区分敌我）。
• 棋子顶部有光、底部有阴影，比较令人舒适。
• UI简洁，容易复刻。

图示如下：

我放大分析，每个棋子由4个圆组成：

• 最内层的圆圈：纯色。
• 往外一层，是一个径向渐变的，从上方的白色，渐变到中部，再渐变到下方的红色/黑色。
• 再外一层，是一个纯色的很窄的圆圈，是棋子边界。
• 最外层，有一个往下方偏移的阴影。

定义阴影

<defs>
  <radialGradient id="shadow">
    <stop offset="90%" stopColor="#333333" stopOpacity="0.33" />
    <stop offset="100%" stopColor="#000000" stopOpacity="0" />
  </radialGradient>
</defs>

定义黑色棋子

<defs>
  <g id="piece-black">
    <circle r="4.55" cx="0.1" cy="0.3" fill="url(#shadow)" />
    <circle r="4.4" fill="#765031" />
    <circle r="4.3" fill="url(#linear-black)" />
    <circle r="3.8" fill="#443322" />
  </g>
</defs>

定义红色棋子

<defs>
  <g id="piece-red">
    <circle r="4.55" cx="0.1" cy="0.3" fill="url(#shadow)" />
    <circle r="4.4" fill="#ca5f36" />
    <circle r="4.3" fill="url(#linear-red)" />
    <circle r="3.8" fill="#ee2211" />
  </g>
</defs>

展示棋子

<use xlinkHref="#piece-red" x="40" y="90" />
<text x="40" y="90" fontSize="5" fill="white" textAnchor="middle" alignmentBaseline="central" fontFamily="LiShu">帥</text>

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