引言

先給大家看一下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。喜歡可以關注我噢～我有空了會分享做游戲的相關技術，會在這個專欄里分享：《教你做小游戲》。